获取props.children的引用是否可行？

Question

我想获取子组件的引用。如何最好地做到这一点？

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>

- ais

---

Child 和 GetRef 之间有什么联系？ - Olivier Boissé

你需要完成什么任务？ - charlietfl

@OlivierBoissé 我已经添加了一个例子。 - ais

Answer 1

我假设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存储到一个数组中。

- Olivier Boissé

---

这会破坏子组件可能已经拥有的 ref 属性，对吗？ - doug65536

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)

---

但是请看将DOM引用暴露给父组件，以了解是否使用ref：

在极少数情况下，您可能希望从父组件访问子节点的DOM节点。一般来说，这不被推荐，因为它会破坏组件的封装性，但偶尔可以用于触发焦点或测量子DOM节点的大小或位置。

- Bhojendra Rauniyar