如何使子組件的子組件具有第一級子代可以使用的引用？

Question

如果我具有以下JSX，則Child的refs為空：

<Parent>
    <Child ref="first">
        <GrandChild ref="parentSeesThisNotChild" />
    </Child>
</Parent>

我希望Child組件在其refs獲得GrandChild 。 我怎么做？

Answer 1

您將必須修改Child組件代碼：

const Child = React.createClass({
  render() {
    const childrenWithProps = React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child, {
        ref: child.ref,
      });
    });

    return (
      <div>
        <h1>Child</h1>
        {childrenWithProps}
      </div>
    )
  },
});