Reactjs 反应高阶组件中的组件名称

我有一个高阶组件，用于几个不同的组件。我希望能够根据传递给HOC的组件改变行为：

const Field = Component => {
  return class WrappedField extends React.Component {
    const type = Component.name === 'EmailField' ? 'email' : 'text'
    render() {
      return <Component type={type} />
    }
  }
}

// Then used like so:

const TextField = props => <input />

export default Field(TextField)

这显然不会在生产中缩小，但名称无法动态读取或保存似乎很疯狂

---

对于如何在HOC中动态派生组件名称的任何建议，我们都将不胜感激。

另一种方法是直接比较组件，如下所示：

const TextField = props => <input {...props} />;
const EmailField = props => <input {...props} />;

const Field = Component => {
  return class WrappedField extends React.Component {
    render() {
      const type = Component === EmailField ? 'email' : 'text'
      return <Component type={type} />;
    }
  };
};

export default Field(TextField)

const TextField=props=>；
const EmailField=props=>；
常量字段=组件=>{
返回类WrappedField扩展React.Component{
render（）{
常量类型=组件===电子邮件字段？'email'：'text'
返回；
}
};
};
导出默认字段（文本字段）

如果成功的话，这将是非常棒的-我已经尝试了一些方法来测试它，但我遇到的问题是，当我尝试进行比较时，我最终进入了一个循环，因为组件都是导出/导入的，所以HOC正在尝试与自身进行比较。你有没有看到一种解决方法，不用将所有内容都存储在一个文件中？我想我不明白。您是否也在文本字段中导入HOC？我这里有一个工作示例啊，我明白了-我遇到的问题是，我声明了我的字段，然后默认导出它们，并用HOC包装，所以如果我尝试在HOC中比较它们，它们已经包装好了。您将字段从包装的字段版本中分离出来的方法将对我有用-非常感谢！很高兴这有帮助。

const TextField = props => <input {...props} />;
const EmailField = props => <input {...props} />;

const Field = Component => {
  return class WrappedField extends React.Component {
    render() {
      const type = Component === EmailField ? 'email' : 'text'
      return <Component type={type} />;
    }
  };
};

export default Field(TextField)