我想获得子组件的引用。做这个的最好方式是什么？
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孩子只有一个孩子，那么您可以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>;
}
}
这是关于 stackblitz的完整示例
如果this.props.children有多个孩子，则需要遍历孩子并将所有孩子存储refs到数组中
这是可以使用forwardRef 的地方：
class GetRef extends React.Component {
render() {
console.log(this.props.forwardRef)
}
}
const ref = React.createRef();
<Child forwardRef={ref} />
或者，您也可以使用：
<Child ref="childRef" .../>
// In the parent component
React.findDOMNode(this.refs.childRef)
但是看看Exposing DOM Refs to Parent Components以了解是否使用 ref ：
在极少数情况下，您可能希望从父组件访问子组件的 DOM 节点。通常不推荐这样做，因为它破坏了组件封装，但它偶尔可用于触发焦点或测量子 DOM 节点的大小或位置。