gpt4 book ai didi

javascript - 使用 react-router-navigation-prompt 时关于弃用 findDOMNode 的警告

转载 作者:行者123 更新时间:2023-12-05 03:52:21 24 4
gpt4 key购买 nike

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

我尝试将 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>
);
}

有什么解决办法吗?

最佳答案

问题跟踪引用:https://github.com/mui-org/material-ui/issues/13394
有几个选项:

  1. 部分禁用严格模式:<Dialog disableStrictModeCompat>
  2. 已转换为在 unstable theme 中使用 refs在@material-ui/core@^4.10 中:
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:

The API allows in many cases that users pass a custom root component. We still need findDOMNode if those components don't forward their refs properly.

关于javascript - 使用 react-router-navigation-prompt 时关于弃用 findDOMNode 的警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62250315/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com