javascript - react :如何在父代的render函数中检查子代的类型？

我知道在渲染过程中我可以通过ref来获得子对象，例如，对子对象调用一个函数（为此，我可以将其添加到子对象中）以确定子对象的类型。

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

但是在此示例中，直到挂载Child才真正调用该函数，因此在Parent的render完成执行之后。

我有一个通过组件接收其子对象的父组件。由于React limitations的原因，在父级的render执行完成之前，我需要以特殊的方式对待特定的子级（即，从父级的render函数为该特定子级返回其他内容）。

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

最佳答案

我遇到过同样的问题，我依靠child.type.name来确定组件的类型。虽然这对我来说很好用，但问题是较旧的浏览器某种程度上不支持该功能，因此我不得不寻找另一种方法。我当时使用的是无状态功能组件，不想切换，所以最终利用了道具

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'

不理想，但可行