如何在react中找到一个功能性子元素的dom元素?

如中建议的 this question ,对于直接调用无状态组件函数,这可能是少数可接受的情况之一:

function withRef(SFC) {
  return React.forwardRef((props, ref) => SFC({ref, ...props}));
}

...

render () {
  const child = React.Children.only(this.props.children);
  const isFunctional = typeof child === 'function' &&
    (!child.prototype || !child.prototype.isReactComponent);

  if (isFunctional) {
    const Child = withRef(child.type);

    return <Child {...child.props} ref={this.someRef}/>;
  } else {
    ...
  }
}

如果功能组件的子组件也不能接受引用,那么这将不起作用。

在这种形式下,效率很低,因为孩子将被重新渲染。根据目的的不同,可能有更好的方法来实现这一点。一个组件可以被设计成接收一个组件来呈现为一个属性而不是一个子属性。或者,如果特定任务(如设置DOM事件侦听器)需要DOM元素,则可以像 this case .