javascript - react : How to check the type of a child in the parent's render function?

Question

我知道在渲染期间我可以通过 refs 获取子项，例如，调用子项上的函数(我可以为此目的将其添加到子项中)来确定子项的类型。

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

但在这个例子中，直到子进程被挂载之后，也就是父进程的渲染完成执行之后，该函数才会被真正调用。

我有一个通过 props 接收其子组件的父组件。因为React limitations我需要在父级的 render 完成执行之前以特殊的方式处理特定的子级(即从父级的 render 函数为该特定子级返回其他内容)。

是否可以在从父级的 render 函数返回之前确定子级的类型(即不使用引用)？

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'

不理想，但可行