React:显示模态时不能为函数组件提供参考 [英] React: Function components cannot be given refs when displaying a modal
问题描述
模态在 App.js 中的 hashRouter 下呈现.当状态 isOpen 为真时显示模态.
The modal is rendered under the hashRouter in App.js. The modal is shown when its state isOpen is true.
尝试使用 react redux 显示 Modal 时出现此错误.
I'm given this error when trying to display a Modal with react redux.
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `TrapFocus`.
in ConnectFunction (at Modal.js:41)
in TrapFocus (created by ForwardRef(Modal))
in div (created by ForwardRef(Modal))
in ForwardRef(Portal) (created by ForwardRef(Modal))
in ForwardRef(Modal) (at Modal.js:35)
in Modal (created by ConnectFunction)
in ConnectFunction (created by WithStyles(undefined))
in WithStyles(undefined) (at App.js:46)
in ThemeProvider (at App.js:24)
in App (created by WithStyles(App))
in WithStyles(App) (at src/index.js:13)
in Provider (at src/index.js:12)
这是我的代码:
Modal.js
import React, { Component } from "react";
import { compose } from "redux";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Modal as MaterialModal } from "@material-ui/core";
import { withStyles } from "@material-ui/styles";
import { closeModal } from "../store/actions/actions-ui";
import BasicModal from "./Modals/BasicModal";
const ModalTypes = {
BasicModal,
};
const styles = {
modal: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
};
class Modal extends Component {
handleCloseModal = () => {
const { dispatch, shouldCloseOnBackgroundTouch } = this.props;
if (shouldCloseOnBackgroundTouch) dispatch(closeModal());
};
render() {
const { modalType, data, isOpen, classes } = this.props;
if (!modalType) {
return null;
}
const ModalToRender = ModalTypes[modalType];
return (
<MaterialModal
disableAutoFocus
className={classes.modal}
open={isOpen}
onClose={this.handleCloseModal}
>
<ModalToRender {...data} />
</MaterialModal>
);
}
}
Modal.propTypes = {
dispatch: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
modalType: PropTypes.string,
// eslint-disable-next-line react/forbid-prop-types
data: PropTypes.object,
shouldCloseOnBackgroundTouch: PropTypes.bool.isRequired,
classes: PropTypes.objectOf(PropTypes.string).isRequired,
};
Modal.defaultProps = {
data: {},
modalType: "",
};
const mapStateToProps = (state) => ({
isOpen: state.ui.modalState.isOpen,
shouldCloseOnBackgroundTouch: state.ui.modalState.shouldCloseOnBackgroundTouch,
modalType: state.ui.modalState.modalType,
data: state.ui.modalState.data,
});
export default compose(
withStyles(styles),
connect(mapStateToProps)
)(Modal);
BasicModal.js
BasicModal.js
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import If from "../__helpers__/If";
import { closeModal } from "../../store/actions/actions-ui";
class BasicModal extends Component {
handleClose = () => {
const { dispatch } = this.props;
dispatch(closeModal());
};
render() {
const { title, text, extraBtnText, extraBtnAction } = this.props;
return (
<Paper>
<If truthy={title}>
<Typography gutterBottom variant="h4">
{title}
</Typography>
</If>
<If truthy={text}>
<Typography gutterBottom vairant="body2">
{text}
</Typography>
</If>
<Button onClick={this.handleClose}>Close</Button>
<If truthy={extraBtnAction && extraBtnText}>
<Button
onClick={() => {
extraBtnAction();
this.handleClose();
}}
>
{extraBtnText}
</Button>
</If>
</Paper>
);
}
}
BasicModal.propTypes = {
dispatch: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
extraBtnText: PropTypes.string,
extraBtnAction: PropTypes.func,
};
export default connect()(BasicModal);
我猜问题在于我试图渲染这样的组件:
I'm guessing that the issue lies with me trying to render a component like this:
<ModalToRender {...data} />
但我似乎无法理解它有什么问题.
But I can't seem to understand what is wrong with it.
感谢任何帮助！
推荐答案
您需要使用 forwardRef 选项.
You need to use the forwardRef option in connect() for the component (e.g. BasicModal) that is wrapped by Material-UI's Modal.
示例:
export default connect(null, null, null, {forwardRef: true})(BasicModal);
Refs 提供对 React 元素的 DOM 节点的访问.Material-UI 的 TrapFocus(由 Modal 使用)使用传递给 Modal 的 child 上的 ref 来管理焦点方面.
Refs provide access to the DOM node for a React element. Material-UI's TrapFocus (which is used by Modal) uses a ref on the child passed to Modal to manage focus aspects.
在您的情况下，传递给 Modal 的子组件是 connect()(BasicModal) 返回的包装器组件.默认情况下，该包装器组件是一个函数组件，并且函数组件不能接受引用，除非被 forwardRef 包裹.
In your case, the child passed to Modal is the wrapper component returned by connect()(BasicModal). That wrapper component is, by default, a function component and function components cannot accept refs except by being wrapped by forwardRef.
connect 的 forwardRef 选项使其使用 React.forwardRef 包装函数组件，以便它可以成功接受它的引用传递给包装的组件(在您的情况下为 BasicModal).
The forwardRef option of connect causes it to wrap the function component using React.forwardRef so that it can successfully accept a ref which it passes along to the wrapped component (BasicModal in your case).
这篇关于React:显示模态时不能为函数组件提供参考的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
