javascript - 对复选框和单选组件使用react

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 改进上述解决方案呢？我得到了“创建一个包装每个公共(public)组件的高阶组件”的反馈。从上面的实现来看，在这里使用 HOC 是否有意义？如果 HOC 是必须的要求，它会是什么样子？

Answer 1

您不需要创建 HOC。您只是返回输入元素。但是 HOCs 像 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" /> .

有关默认 Prop 的更多信息，请参阅 doc .