Reactアプリで許可チェックを処理する方法（状態はReduxで維持されます）？

Question

パーミッションチェックはどのように対処しますか？ 私は2つの方法で試しました。許可チェックを処理するためのより良い方法や、どちらを使うのが最も良いのですか？

タイプ1
コンテキストを介してアクセス許可を渡します。許可コンポーネントは

class HomePage extends React.Component{ 
    getChildContext(){ 
    return {permission:this.props.permission} 
    } 
    render(){ 
    return <div> 
     <Permission check='Edit'> 
     <PopupMenu> 
      <div>Edit</div> 
     </PopupMenu> 
     </Permission> 
     <Permission check='Delete'> 
     <PopupMenu> 
      <div>Delete</div> 
     </PopupMenu> 
     </Permission> 
    </div> 
    } 
} 
HomePage.childContextType={permission:...} 
class Permission extends React.Component{ 
    render(){ 
     if(this.context.permissions.indexOf(this.props.check)!=-1) 
     return this.props.children 
     else 
     return null; 
    } 
} 

戻りコンポーネントまたはnull

を満たすタイプ2
いずれかのソリューションは結構ですmapStateToProps機能の権限を確認し、許可

class HomePage extends React.Component{ 
    render(){ 
    return <div> 
     <PopupMenu> 
      <div>{this.props.operation}</div> 
     </PopupMenu> 
    </div> 
    } 
    } 
function mapStateToProps(state){ 
    var operation=""; 
    if(state.permission=="Edit"){ 
     operation="Edit" 
    } 
    else if(state.permission=="Delete"){ 
     operation="Delete" 
    } 
    return {operation} 
} 
connect(mapStateToProps)(HomePage) 

Answer 1

に基づいて小道具を返す許可場合は、コンテキストから許可を取得します。 2番目のソリューションはさまざまなレベルのアクセスを提供しますが、最初のソリューションは「すべてまたは何も」ではありません。だからあなたのニーズとコーディングスタイルの好みにかかっています。