더 높은 순서의 구성 요소와 반응한다.

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") 
); 

, 소품 변수에 액세스하려면 :

난 다음 함수가 있다고 가정 해 클래스 구성 요소.

위의 예에서 Wrap 된 구성 요소 또는 return 문과 별도로 어디에서나 액세스 할 수 있으므로 위의 예에서 소품이 어디서 나왔습니다.

Answer 1

상위 구성 요소는 기능 구성 요소 인 기능을 반환합니다. 나는 바로 그 생각에 foo(Info)은 withAdminWarning(Info)을 의미합니까?

그래서 AdminInfo 구성 요소는 기본적으로 보이는 withAdminInfo를 호출 한 후 같은 :

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