Question

我想知道是否有一个更高阶的组件＆＃34;没有实际组件作为输入但仍返回组件。

以下用例：我需要实现一个UI-Kit，其中包括一堆（自定义）输入字段，这些字段在样式上几乎相同，只是在类型，错误消息和其他一些小东西上有所不同。每个输入字段由2个父div和实际的html输入元素组成。

由于我从未见过这样的事情（我的想法），我想知道我的方法是否在现实世界附近。

我有一个更高阶的组件或更高阶的布局：

import React, { PureComponent } from 'react';

export default handler => staticProps =>
  class extends PureComponent {
    render() {
      return (
        <input
          type="text"
          onChange={handler.onChange}
          placeholder={staticProps.placeholder} />
      );
    }
  };

我使用的地方为我的组件提供了它应该使用的道具：

import Hoc from './HocTextInput';

const handler = {
  onChange: e => console.log(e.target.value),
};

const staticProps = {
  placeholder: 'Placeholder',
};

export default Hoc(handler)(staticProps);

我的想法是在使用作文等时不要重复自己。但就像我已经提到的那样，我不确定我是否应该这样做。

这是不好的做法吗？如果是这样，你能给我一个替代解决方案吗？

Answer 1

如果您的布局相同而且您不需要为组件添加任何特定功能，那么您也可以使用道具而不是编写更高阶的组件

  class App extends PureComponent {
    render() {
      const {handler, staticProps} = this.props;
      return (
        <input
          type="text"
          onChange={handler.onChange}
          placeholder={staticProps.placeholder} />
      );
    }
  };

并像

一样使用它

const handler = {
   onChange: this.onChange
}
const staticProps = {
   foo: 'bar'
}
<App handler={handler} staticProps={staticProps} />

HOC会在你需要添加替换某些特定组件的布局中进行处理，或者你希望为组件添加某些功能，例如处理外部点击

在没有输入组件的情况下反应高阶组件

1 个答案: