反应高阶组件

时间:2018-07-16 15:56:54

标签: reactjs

让我们说我有一个对象数组,其中每个对象都具有如下结构

obj = {
    name:"Name1",
    description:"Description1",
    activeState:1,
    rating:5
}

const User = (obj) => {
    let userActiveState = (obj.activeState === 1) ? 'Active' : 'Non Active';

    return (
        <tr>
            <td>{obj.name}</td>
            <td>{obj.description}</td>
            <td>{userActiveState}</td>
        </tr>
    );
}

User.propTypes = {
    name: PropTypes.string
    description: PropTypes.string
    activeState: PropTypes.number
}

User.defaultProps = {
    name: "Not Available"
    description:""
    activeState: 0
}

我使用此数组使用User(无状态功能React组件)创建UI,但是在无状态功能React组件吐出UI之前,我想对
所需的对象属性进行一些修改 UI(例如,使用文本代替activeState的数字),并且并非所有对象属性也是必需的。 我将在哪里删除不需要的属性,以便可以仅为必需的属性定义defaultProps和proptypes,并使用可以转换和过滤obj属性的高阶组件?

1 个答案:

答案 0 :(得分:0)

这里不需要HoC-简单的组合就足够了:

const Component = ...;

const ComponentButDifferentFormats = ({propToSkip, propToRename, ...props}) => (
  <Component
    {...props}
    propRenamed={propToRename}
    propX={parseFloat(props.propX)}
    propY={'' + props.propY}
  />
);

使用这种方法,您将使转换逻辑与真实UI分离。例如,使用API​​响应时,它确实非常有用。创建HoC也是一种选择:可以使用格式,过滤器甚至组件本身进行参数化。上例中的另一个功能:Component => ...