reagieren Komponente höherer Ordnung

Question

Im Blick in Funktionen höherer Ordnung und ich verstehe nicht wirklich, wie dieses Teil funktioniert.

sagen, ich habe die folgende Funktion:

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

Von meinem Verständnis von Komponenten, die Requisiten Variable zuzugreifen, müssen Sie entweder Requisiten verwenden, wenn sie eine stateless Komponente oder this.props wenn es eine Klassenkomponente.

Woher kommen die Requisiten im obigen Beispiel, da ich von der WrappedComponent oder anderswo abgesehen von der Return-Anweisung keinen Zugriff darauf bekommen kann.

Answer 1

Die Komponente höherer Ordnung gibt eine Funktion zurück, die eine funktionale Komponente ist. Habe ich richtig gedacht, dass foo(Info) bedeutet withAdminWarning(Info)?

So nach dem Aufruf von withAdminInfo die AdminInfo Komponente sieht im Grunde wie:

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