我正在尝试使用react中的ref访问modal(mui-modal)内部的元素，但对元素的引用为null

Question

我正在尝试访问组件中的dod-mount生命周期方法，但它显示为null。如果我删除模态，它会按预期工作，但内部的模态ref不能正常工作。谢谢我试过跟随，但它总是显示为空。

import React, { Component } from "react";
import {
Modal,
Backdrop,
Fade,
Container
} from "@material-ui/core";
import { contactUsFormSchema } from "../../constant/FormValidation";
class ContactUs extends Component {
constructor(props) {
super(props);
this.state = {
};
this.rootRef = React.createRef();
this.childRef = React.createRef();
this.observer = new IntersectionObserver((entries)=>{
console.log(entries[0]);
},{
root:this.rootRef.current
});
}
componentDidMount(){
console.log(this.childRef.current); // this is always null
console.log(this.rootRef.current); // this is always null
// this.observer.observe(this.childRef.current);
}
render() {
const { classes } = this.props;
return (
<Modal
open={true}
onClose={this.props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500
}}
>
<Container className={classes.modalStyle}  ref={this.rootRef}>
<div className={classes.title} ref={this.childRef} >Contact US</div>
</Container>
</Modal>
);
}
}
export default ContactUs;

Answer 1

对于那些仍然面临这个问题的人，我通过以下规则解决了它：

为modal中的内容创建一个子组件，然后在子组件中使用useRef或createRef。

在模态中渲染子组件。

它会起作用的。

示例如下(它只是一个骨架，而不是一个工件(Modal是一个mui组件：

const ChildComponent = (props) => {
return (
<div ref={yourReactRef}>
<div>my content</div>
</div>
)
}
const ParentComponent = (props) => {
return (
<Modal>
<ChildComponent />
</Modal>
)
}