Reactjs React-HOC包装器

我不确定我是否做得对，但我想做一个hoc，根据用户是否是admin显示组件。这是我的建议：

export const WithUser = (Component) => (props) => {
  if (props.admin) {
    return <Component {...props} />;
  }

  return null;
};

但我得到了那个错误。也许我没有正确使用HOCs。我只想包装用户需要是管理员才能查看的组件。您可以从react官方网站查看

将您的代码修改为：

// admin prop should be obtained from within WithUser or other places such as redux store or react context
export const WithUser = (Component) => (props) => {
  if (props.admin) {
    return <Button {...props} />;
  }

  return null;
};

class Button extends React.Component {
  render() {
    return <button>Hi</button>
  }
}

export default WithUser(Button)

//应该从WithUser内部或其他地方（如redux store或react context）获取admin prop
导出常量WithUser=（组件）=>（道具）=>{
如果（道具管理）{
返回；
}
返回null；
};
类按钮扩展了React.Component{
render（）{
回电
}
}
使用用户导出默认值（按钮）

with user

不是组件。它是一个接受组件并返回修改组件的函数。这就是高阶组件（HOC）的含义

---

您可以使用所需的语法编写一个组件：

<WithUser admin>
   <button>Hi</button>
</WithUser>

---

我不想再次定义按钮组件。我只想包装任何组件，然后根据需要显示它，高阶组件是一个接受组件并返回新组件的函数。如果要使用HOC，则必须定义一个组件。你不能像你的示例代码那样直接使用HOC官方文档解释得很清楚，你可以阅读更多…不确定这是否回答了你的问题，但是通过挂钩你可以像这样做

{admin&&（Hi）}

，你可以用你想要的任何组件替换按钮

<WithUser admin>
   <button>Hi</button>
</WithUser>

export const WithUser = ({admin, children}) => {
  return admin ? <>{children}</> : null;
};