Question

我正在尝试在React中创建一个“高阶”函数，该函数对包装的组件执行一些基于权限的检查并相应地返回它。

MyComponent.js

...

export default Permissions(MyComponent)

Permissions.js

export default function Permissions(Component) {

  class NewComponent extends React.Component {

     // ... perform checks here

    render() {

      return {validPermissions && <Component />}

    }
  }
}

但是，我希望能够将此Permissions用作React组件（而不是包装组件导出的函数）。

它看起来与此相似：

<Permissions>
    <MyComponent />
</Permissions>

当我运行React.Component.isPrototypeOf(Component.children)时，我在这些情况下得到了错误。我倾向于认为解决方案是使用一些React或ReactDOM方法将React Element转换为React 组件，然后执行相同的检查。

如何将React元素转换为React组件？

更新：

我将权限作为上下文，但没有寻求有关实现权限的帮助。

我我基本上寻找React.createElement(MyComponent)的反面。

Answer 1

你可以使用一个功能组件，它结合了两者的优点：它很简单（只是一个函数！），同时它是一个适当的无状态React组件。

const Permissions = ({ granted, children }) =>
    granted ? React.Children.only(children) : null;

用法：

<Permissions granted={true}>
    <MyComponent />
</Permissions>

从React元素

1 个答案: