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
}

obj={
名称：“名称1”，
description:“Description1”，
活动状态：1，
评级：5
}
const User=（obj）=>{
让userActiveState=（obj.activeState==1）？“活动”：“非活动”；
返回(
{obj.name}
{obj.description}
{userActiveState}
);
}
User.propTypes={
名称：PropTypes.string
描述：PropTypes.string
activeState:PropTypes.number
}
User.defaultProps={
名称：“不可用”
说明：“”
活动状态：0
}

我使用此数组创建用户界面（无状态功能反应组件），但在无状态功能反应组件吐出UI之前，我想对 UI（例如使用文本而不是activeState的数字），并且并非所有对象属性都是必需的。

---

我应该在哪里删除不需要的属性，以便只为所需的属性定义defaultProps和proptypes，我会使用一个高阶组件来转换和过滤obj属性？

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

const Component = ...;

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

const组件=。。。；
const ComponentButDifferentFormats=（{propToSkip，propToRename，…props}）=>(
);

---

使用这种方法，您可以将转换逻辑与真实UI分离。例如，对于API响应，它非常有用。创建一个HoC也是一个选项：它可以通过格式、过滤器甚至组件本身进行参数化。上面示例中还有一个函数：

Component=>…

const组件是一个只包含UI的函数，现在我可以向其中添加defaultProps和PropType。是吗？是的。您可以为这两种类型分别定义

propTypes

和

defaultProps

。