Question

我有一个用于更高级别组件的组件。我希望能够根据传递给HOC的组件来更改行为：

<!doctype html>
<html lang="en">
<head>

<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>

<title>Bootstrap Slider</title>
<style>
</style>

<script>
    $("#ex1").bootstrapSlider({
        formatter: function(value) {
            return "Current value: " + value;
        }
    });
</script>

</head>
<body>
    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />

</body>

</html>

这在dev中有效，但在生产中组件名称会缩小，因此会失败。我有一些关于该主题的帖子，例如this one建议使用React内部，或者this one建议从构造函数中读取，似乎无效。

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

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中动态派生组件名称的建议都将受到赞赏。

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)

在高阶组件中反应组件名称

1 个答案: