使用 react-router-navigation-prompt 时有关不推荐使用的 findDOMNode 的警告答案

【问题标题】：Warning about deprecated findDOMNode when using react-router-navigation-prompt使用 react-router-navigation-prompt 时有关不推荐使用的 findDOMNode 的警告
【发布时间】：2020-09-26 17:23:34
【问题描述】：

我正在使用 react-router-navigation-prompt 在用户离开页面时显示模式窗口。它工作正常，但是在更新我的依赖项后，我不断收到此错误：

我尝试将 ref 转发给子组件，但它似乎不起作用。这是我的代码：

import React from 'react';
import NavigationPrompt from 'react-router-navigation-prompt';
import { CancelChangesDialog } from './CancelChangesDialog';
import _ from 'lodash';

interface Props<T> {
  currentForm: T;
  initialForm: T;
}

export function LeavingPrompt<T>(props: Props<T>) {
  const { currentForm, initialForm } = props;

  return (
    <NavigationPrompt when={!_.isEqual(currentForm, initialForm)}>
      {({ onConfirm, onCancel }) => (
        <CancelChangesDialog
          open
          handleCancel={onCancel}
          handleConfirm={onConfirm}
        />
      )}
    </NavigationPrompt>
  );
}

CancelChangesDialog 是模态视图组件：

import React from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
} from '@material-ui/core';

interface Props {
  open: boolean;
  handleCancel(): void;
  handleConfirm(): void;
}

export function CancelChangesDialog(props: Props) {
  const { open, handleCancel, handleConfirm } = props;

  return (
    <Dialog open={open}>
      <DialogTitle id="alert-dialog-title">{'Confirm changes'}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          Changes are not saved! Leave anyway?
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleCancel} color="primary">
          Cancel
        </Button>
        <Button
          onClick={handleConfirm}
          color="primary"
          style={{ textTransform: 'initial' }}
          autoFocus
        >
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
}

任何想法如何解决这个问题？

【问题讨论】：

标签： javascript reactjs typescript react-router

【解决方案1】：

问题跟踪器参考：https://github.com/mui-org/material-ui/issues/13394
有几个选项：

部分禁用严格模式：<Dialog disableStrictModeCompat>
它已被转换为在@material-ui/core@^4.10 中的unstable theme 中使用引用：

import { ThemeProvider } from "@material-ui/core/styles";
import { unstable_createMuiStrictModeTheme } from "@material-ui/core/styles";
const theme = unstable_createMuiStrictModeTheme();
<ThemeProvider theme={theme}>
<Dialog>...</Dialog>
</ThemeProvider>

注意：阅读不稳定主题的文档。有限制。

Codesandbox 修复演示： https://codesandbox.io/s/practical-gould-j7pqu

Reason:

在许多情况下，API 允许用户传递自定义根组件。如果这些组件没有正确转发它们的引用，我们仍然需要 findDOMNode。

【讨论】：