反应 HOC 包装器答案

【问题标题】：React HOC wrapper反应 HOC 包装器
【发布时间】：2021-07-13 05:05:15
【问题描述】：

我不确定我这样做是否正确，但我想制作一个 hoc，它会根据用户是否为管理员来显示组件。这是我的 HOC：

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

  return null;
};

我使用时出错Functions are not valid as a React child.对我来说没有意义。

我想这样使用它：

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

但我得到了那个错误。也许我没有正确使用 HOC。我只想包装用户需要成为管理员才能查看的组件

【问题讨论】：

不确定这是否能回答你的问题，但使用钩子你可以这样做{admin && (<button>Hi</button>)}，你可以用你想要的任何组件替换按钮

标签： reactjs higher-order-components

【解决方案1】：

你可以去react官网看看HOC document

将您的代码修改为：


// 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)

【讨论】：

我不想再次定义 Button 组件。我只想包装任何组件，然后根据 if admin 显示它
你应该，高阶组件是一个函数，它接受一个组件并返回一个新组件。如果你想使用 HOC，那么你必须定义一个组件才能使用。你不能像你的示例代码那样直接使用 HOC
官方文档解释的很清楚，可以多看...

【解决方案2】：

WithUser 不是组件。它是一个接受组件并返回修改后的组件的函数。这就是高阶组件 (HOC)。

你可以编写一个组件，用你想要的语法来做你想做的事：

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

但它不会是 HOC。相反，您想使用 children prop 访问子 JSX 元素并有条件地渲染它们。

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

【讨论】：