React要素からReactコンポーネントを作成する

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.Component.isPrototypeOf(Component.children)を実行すると

<Permissions> 
    <MyComponent /> 
</Permissions> 

私は、これらのインスタンスで偽得ます。私の考えは、ReactまたはReactDOMメソッドを使用してReact ElementをReact コンポーネントに変換してから、同じチェックを実行することです。

どのようにして反応成分を反応成分に変換できますか？

---

更新：

私は、コンテキストとしての権限について少し与えたが、権限を実装に関しては、ヘルプを探していません。

I amは、React.createElement(MyComponent)とは基本的に逆です。

Answer 1

機能コンポーネントは、両方の世界の最高のものを組み合わせることができます。単純です（機能だけです）と同時に、適切なステートレスなリアクションコンポーネントです。

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

使用法：

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