我正在尝试学习如何编写高阶组件,并且我有两个代码非常相似的组件。据我所知,重复代码是 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 吗?像这样的东西会如何重写?
最佳答案
您可以为 confirm
添加一个 prop,并拥有一个可重用的组件,无需 HOC。像这样的东西:
const MySectionWithOptionalConfirmation = (props) => (
<div passedProp={props.passed} >
<Row>
<FirstName />
{props.confirm && <ConfirmFirstName />}
</Row>
<Row>
<LastName />
{props.confirm && <ConfirmLastName />}
</Row>
</div>
)
关于javascript - 如何在 React 中将重复的 JSX 抽象为高阶组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57511049/