如何解决渲染子节点时将 React.findDOMNode 迁移到 refs
我正在处理一个 React 组件,它使用 React.findDOMNode(this) 获取有关其在 DOM 中的位置的数据,然后它通过 props 呈现其子项(目的是计算某个值以传递给它的 onChange方法)。
componentDidMount() {
this.node = ReactDOM.findDOMNode(this);
}
componentDidUpdate() {
this.node = ReactDOM.findDOMNode(this);
this.doThingsWithTheNode()
}
render() {
return this.props.children
}
由于我正在将其迁移到功能组件并且 findDOMNode 通常已被弃用,因此我正在寻找一种方法来改用引用。我的问题是我不知道 props.children 会持有什么,所以(据我所知)我无法转发对其内容的引用。
我尝试了这些方面的解决方案(我可以将其限制为单个孩子),但是 this.ref 未设置为任何值:
render() {
const child = React.Children.only(this.props.children)
return (
React.cloneElement(child,{ ref: el => this.ref = el })
)
}
我可以将孩子们包裹在一个 div 中并在其上设置我的参考,据我所知,这在大多数情况下都可以正常工作。
这个问题是否有另一种“反应”解决方案,或者这种场景是否是 React 团队认为应该避免的反模式?
---编辑---
重新阅读 forwardRefs 的文档,我意识到文档本身建议使用 div 包装器在有效的 html 元素上设置 ref,或者与示例一样使用中间组件来保存该 div。
---I am the parent---
const ref = createRef()
return <Child ref={ref}/>
---I am the child---
const Child = React.forwardRef((props,ref) => (
<div ref={ref}>
{props.children}
</div>)
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。