reactjs - 高阶组件中的反应组件名称

Question

我有一个用于几个不同组件的高阶组件。我希望能够根据传递给 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)

这在开发中有效，但在生产中组件名称被缩小，因此失败。我有几篇关于这个主题的帖子，比如这篇建议使用 React 内部的帖子，或者这篇建议从构造函数中读取的帖子，这似乎不起作用。

我发现的唯一解决方法是传递第二个参数：

export default Field(TextField, 'TextField')

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

非常感谢任何有关如何在 HOC 中动态派生组件名称的建议。

标签： reactjs

Answer 1

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

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)