我想获取子组件的引用。做这个的最好方式是什么？
class Child extends React.Component {
render() {
return <div>Child</div>;
}
}
class GetRef extends React.Component {
componentDidMount() {
console.log(this.props.children.ref)
}
render() {
return this.props.children
}
}
编辑：
所以我可以这样使用它
<GetRef><Child/></GetRef>
我假设GetRef孩子们只有one孩子，那么你可以检索唯一的引用child具有此代码的组件
class Child extends React.Component {
render() {
return <div>Child</div>;
}
}
class GetRef extends React.Component {
componentDidMount() {
console.log(this.ref);
}
render() {
const childElement = React.Children.only(this.props.children);
return React.cloneElement(
childElement,
{ ref: el => this.ref = el }
);
}
}
class App extends Component {
render() {
return <GetRef><Child/></GetRef>;
}
}
这里是完整的例子 https://stackblitz.com/edit/react-bsmrci在堆栈闪电战上
If this.props.children有多个孩子，您将需要迭代孩子并存储所有refs到一个数组中
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
