對復選框和無線電組件做出反應

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
}

請參閱此博客源以更好地了解 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" /> 。

有關默認道具的更多信息，請參閱文檔。