reactjs - 在 React 中，如何使用 HOC（高阶组件）从通用组件中创建多个组件？

Question

我创建了一个通用组件，用作其他组件用作标签的包装器。这是我的通用组件：

const Label = ({ data, attribute, style, link }) => {
  if (link) {
    return (
      <Link to={link} style={style}>{data ? `${data[attribute]}` : ''}</Link>
    );
  }
  return (
    <div style={style}>{data ? `${data[attribute]}` : ''}</div>
  );
};

我想用它作为我的通用组件来渲染不同的标签组件，例如：

const CityLabel = ({ data }) => (
  <div>{data ? `${data.city}` : ''}</div>
  )

和

const UserLabel = ({ user }) => (
  <div>{user ? `${user.firstName} ${user.lastName}` : ''}</div>
  )

ETC...

我如何使用 HOC 来做到这一点？

Answer 1

这个例子假设UserLabel只渲染name而不是firstName&lastName因为你的Label组件不能处理两个属性。

const Label = ..., 
makeLabel = (
    (Label) => (mapLabelProps) => (props) => 
        <Label {...mapLabelProps(props)} />
)(Label),
CityLabel = makeLabel(({data, style, link}) => ({
    data,
    attribute: 'city',
    style,
    link
})),
UserLabel = makeLabel(({user, style, link}) => ({
    data: user,
    attribute: 'name',
    style,
    link
}));

render(){
    return (
        <div>
            <CityLabel data={{city:"NYC"}} />
            <UserLabel user={{name:"obiwan"}} />
        </div>
    )
}