Question

我正在构建自己的复选框和广播组件，以便可以一遍又一遍地重复使用它。

会是这样

import React, { Component } from 'react'
export class Checkbox extends Component {
    render() {
        return (
            <input type={this.props.type === 'checkbox' ? 'checkbox' : 'radio'} placeholder={this.props.label} />
        )
    }
}

如果我想要一个“复选框”，可以这样使用 <Checkbox type="checkbox" label="My checkbox" />

如果我想要一个“复选框”，可以这样使用 <Checkbox type="radio" label="My checkbox" />

但是在这种情况下如何使用HOC改善上述解决方案？我收到了“创建包含每个组件的通用组件的高阶组件”的反馈。从上面的实现中，在这里使用HOC甚至有意义吗？如果HOC是必须的要求，它将是什么样？

Answer 1

您不需要创建HOC。您只是在返回输入元素。但是HOC的使用就像mixin：

const NewComponent = (BaseComponent) => {
  // ... create new component from old one and update
  return UpdatedComponent
}

请参阅此blog source，以更好地了解HOC。

要更好地改善组件，您可以这样做：

import React, { Component } from 'react'
export class Checkbox extends Component {
    render() {
      const { type, label } = this.props
        return (
            <input type={type} placeholder={label} />
        )
    }
}

现在，您只需根据需要传递类型和标签：

<Checkbox type="radio" label="The label" />
<Checkbox type="checkbox" label="The label" />

或者，如果您想默认使用checkbox，则可以这样定义默认值：

Checkbox.defaultProps = {
  type: 'checkbox',
  label: 'The default label'
}

现在，如果您像这样使用组件：

<Checkbox />

这将呈现<input type="checkbox" label="The default label" />。

有关默认道具的更多信息，请参见doc。

对复选框和无线电组件做出特殊反应

1 个答案: