是否有可能获得props.children的参考？

Question

我想得到Child组件的参考。做这个的最好方式是什么？

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>

Answer 1

我假设GetRef孩子只有一个孩子，那么你可以用这个代码检索唯一的child组件的ref

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上的complete example

如果this.props.children有多个孩子，你将需要迭代孩子并将所有refs存储到一个数组中

Answer 2

这是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节点的大小或位置。