我知道我可以像这样访问孩子的裁判
ParentComponent extends React.Component {
constructor() {
this.myRef = React.createRef();
}
render() {
return (
<ChildComponent>
<div ref={myRef}>Blah</div>
<ChildComponent>
);
}
}
ChildComponent extends React.Component {
render() {
const {children} = this.props.children;
console.log(children.ref) // Will get DOM element
return {children}
}
}
但是有没有一种方法可以获取DOM元素而不传递父组件的引用,以便我的子组件可以从this.props.children中获取引用?
在较高的层次上,我正在尝试制作一个可扩展的组件ChildComponent,以便每个使用ChildComponent的父组件都不必为子组件声明引用。
答案 0 :(得分:0)
在这里Getting DOM node from React child element
找到了答案答案有点老了,所以我用回调引用重写了一部分,而不是使用findDOMNode(https://github.com/yannickcr/eslint-plugin-react/issues/678)。
ParentComponent extends React.Component {
constructor() {
this.myRef = React.createRef();
}
render() {
return (
<ChildComponent>
<div ref={myRef}>Blah</div>
<ChildComponent>
);
}
}
ChildComponent extends React.Component {
constructor() {
this.myElement = null;
this.myRef = element => {
this.myElement = element;
};
}
render() {
const {children} = this.props.children;
return (
<div>
{React.cloneElement(children, { ref: this.myRef})};
</div>
)
}
}
注意:以上内容仅适用于仅具有父级子级的子级子级