javascript - 如何在 React 中将重复的 JSX 抽象为高阶组件

Question

我正在尝试学习如何编写高阶组件，并且我有两个代码非常相似的组件。据我所知，重复代码是 HOC 的一个很好的候选者。当 HOC 与注入(inject)到组件中的其他 JSX 相关时，我似乎无法理解如何编写 HOC。

举一个小例子，假设我有这两个组件:

const MySection = (props) => (
  <div passedProp={props.passed} >
    <Row>
      <FirstName />
    </Row>

    <Row>
      <LastName />
    </Row>
  </div>
);


const MySectionWithConfirmation = (props) => (
  <div passedProp={props.passed} >
    <Row>
      <FirstName />
      <ConfirmFirstName />
    </Row>

    <Row>
      <LastName />
      <ConfirmLastName />
    </Row>
  </div>
);

上面的东西可以做成 HOC 吗？像这样的东西会如何重写？

Answer 1

您可以为 confirm 添加一个 prop，并拥有一个可重用的组件，无需 HOC。像这样的东西:

const MySectionWithOptionalConfirmation = (props) => (
    <div passedProp={props.passed} >
      <Row>
        <FirstName />
        {props.confirm && <ConfirmFirstName />}
      </Row>

      <Row>
        <LastName />
        {props.confirm && <ConfirmLastName />}
      </Row>
    </div>
  )