React：如何在父级的渲染函数中检查子级的类型？

Question

我知道在渲染期间我可以通过 refs 获取孩子，例如，在孩子上调用一个函数（我可以为此添加到孩子中）来确定孩子的类型。

<Child ref={(child) => {this._childType = child.myFunctionToGetTheType();}} />

但是在这个例子中，直到 Child 被挂载，这个函数才真正被调用，所以在renderParent 的 完成执行之后。

我有一个父组件，它通过 props 接收它的子组件。由于React 的限制，我需要render在父级完成执行之前以特殊方式处理特定子级（即从父级render函数中为该特定子级返回其他内容）。

是否可以在从父render函数返回之前确定子函数的类型（即不使用 refs）？

Answer 1

我遇到了同样的问题，我依赖于child.type.name确定组件的类型。虽然这对我来说很好用，但问题是旧浏览器不知何故不支持它，所以我不得不找到另一种方法。我正在使用无状态功能组件并且不想切换，所以最终利用了 props

const MySFC = () => {
  //...
  return (
    <div className="MySFC"></div>
  );
};

MySFC.propTypes = {
  type: PropTypes.string
};

MySFC.defaultProps = {
  type: "MySFC"
}

export default MySFC;

然后而不是使用child.type.name === 'MySFC'我使用child.props.type === 'MySFC'

不理想，但有效