javascript - Reactアプリでパーミッションチェックを処理するにはどうすればよいですか(Reduxで状態を維持します)?

Question

Reactでパーミッションチェックを処理するには? 2つの方法で試しました。許可チェックを処理するためのより良い方法、または使用するのに最も適した方法はありますか?

タイプ 1
コンテキストを介してパーミッションを渡します。権限が戻りコンポーネントまたは null を満たす場合、権限コンポーネントはコンテキストから権限を取得します

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;
    }
}

タイプ 2
mapStateToProps 関数でパーミッションを確認し、パーミッションに基づいて props を返します

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)