ReactJSの要素を動的に隠します

windupurnomo：

私は、Web側でアクセス権の管理について懸念を持っています。管理者ロールを持つユーザーは、Webのすべてを見ることができます。金融の役割を持つユーザーは、単に要素のいくつかを見ることができます。私はこれらのようなデータベースにこの状態を管理します。

管理者がアクセスすることができます。すべてを
A、B：ファイナンスの要素にアクセスすることができます
A、C：倉庫の要素にアクセスすることができます

<div id="a">
  Component A
</div>
<div id="b">
  Component B
</div>
<div id="c">
  Component C
</div>

私はこれを行うことによって、手動で行うことができます。

export default props => {
  const allowedElements = ['a', 'b']; // get by role of current user
  return (
    <>
      {allowedElements.indexOf('a') >= 0 && <div>Component A</div>}
      {allowedElements.indexOf('b') >= 0 && <div>Component B</div>}
      {allowedElements.indexOf('c') >= 0 && <div>Component C</div>}
    </>
  );
}

私はこの状況に対処するための有効/簡単な方法があると願っています。あなたは私に示唆を与えることができますか？

追加のソリューション私の希望は、ネストされた要素を処理することができます。コードの下に、それらの要素BとC 1は、ロールに基づいて非表示にすることができます。

<div id="a">
  Component A
</div>
<div>
  <div id="b">
    Component B
  </div>
  <div id="c">
    Component C
  </div>
</div>

windupurnomo：

グーグルでの数回の後、私が得ますReact.Children。これを利用して、私は「すべて」を変更することができます。

私たちの要素をループし、それの子使用 React.Children.map
すべての要素と子で、IDがアクセスAUTHORIZEであれば、それを表示チェック
IDだけであるとして返されていない要素。

コードサンドボックス：https://codesandbox.io/s/heuristic-wilbur-kk3r1

要素が本当に戻っ前に、私はそれのショー/または非表示を評価します

  const b = React.Children.map(myComponent, (child, i) => {
    return check(child);
  });

これは、要素と子を反復処理するロジックです

  const check = child => {
    const p = child.props;
    if (p.id && allowedElements.indexOf(p.id) < 0) return null;
    else if (Array.isArray(p.children)) return p.children.map(c => check(c));
    else if (typeof p.children === "object") return check(p.children);
    else return child;
  };

ReactJSの要素を動的に隠します

おすすめ