Question

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

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属性的高阶组件？

Answer 1

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

const Component = ...;

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

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

反应高阶组件

1 个答案: