高次の成分に反応する

Question

高次の関数を調べて、この部分の仕組みを本当に理解していません。もしそのステートレスなコンポーネント、またはthis.propsそれがある場合は、どちらかの小道具を使用する必要があり、小道具の変数にアクセスするには、コンポーネントの私の理解から

const withAdminWarning = WrappedComponent => { 
    return props => (
    <div> 
     {props.isAdmin && <p>This is private info. Please dont share!</p>} 
     <WrappedComponent {...props} /> 
    </div> 
); 
}; 


const Info = props => (
    <div> 
    <h1>Info</h1> 
    <p>This info is: {props.info}</p> 
    </div> 
); 

const AdminInfo = foo(Info); 

ReactDOM.render(
    <AdminInfo isAdmin={true} info="There are the details" />, 
    document.getElementById("app") 
); 

：

は、私は、以下の機能を持っていると言いますクラスコンポーネント

上記の例では、WrapedComponentやreturn文以外の場所では、どこからでもアクセスできるようになっています。

Answer 1

上位コンポーネントは、機能コンポーネントである関数を返します。 foo(Info)はwithAdminWarning(Info)を意味すると思いますか？

のでwithAdminInfoを呼び出した後AdminInfoコンポーネントは次のように基本的になります。

const AdminInfo = props => (
    <div> 
     {props.isAdmin && <p>This is private info. Please dont share!</p>} 
     <div> 
      <h1>Info</h1> 
      <p>This info is: {props.info}</p> 
     </div> 
    </div> 
);