我在子组件中有一个 iFrame，并且想将 iframe 的 ref 传递给父组件，以便我可以对 iframe 执行 postMessage。我不确定如何实现从孩子到父母的转发引用。
谢谢！
使用类组件在 React 中将 Ref 从子级传递给父级
IT技术
javascript
reactjs
next.js
2021-05-18 09:14:28
2个回答
这是一个例子，你怎么做
const { forwardRef, useRef, useState, useEffect } = React;
const Child = forwardRef((props, ref) => {
const computeDataUrl = (value) => {
return `data:text/html,${encodeURI(value)}`
}
const [data, setData] = useState(computeDataUrl('Init'))
const onMessage = ({data, origin}) => {
setData(computeDataUrl(data));
}
useEffect(() => {
const iFrameElement = ref && ref.current;
if(iFrameElement) {
const iFrameWindow = iFrameElement.contentWindow;
iFrameWindow.addEventListener("message", onMessage, false);
}
return () => {
iFrameWindow.removeEventListener("message", onMessage);
}
}, [])
return <iframe ref={ref} src={data} width="400" height="300" sandbox="allow-same-origin allow-scripts">
</iframe>
})
const Parent = () => {
const ref = useRef();
useEffect(() => {
const iFrameElement = ref && ref.current;
if(iFrameElement) {
const postMessage = iFrameElement.contentWindow.postMessage;
postMessage("Message from parent");
}
}, [ref])
return <Child ref={ref}></Child>
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>如果你想要你的孩子参考，那很容易......
<ChildComponent
ref={(instance) => {this.child = instance}}
/>
然后你可以像this.child.childFunction().
如果您想获得您孩子的孩子参考，只需继续此模式。
你的孩子class：在你的render().
render() {
return (
<GrandChildComponent
ref={(instance) => {this.grandchild = instance}}
/>
);
}
您的父类：调用子组件的引用grandchild键。
var grandchild = this.child.grandchild;