React - Laden Komponente auf jede Komponente

Question

Meine Reagieren Web App hat eine Seitenkomponente. Die Seitenkomponente führt die Async-Aufrufe für die untergeordneten Komponenten aus. Jetzt muss ich dazu auf jeder Seite

export default class Page extends React.Component { 

constructor(props) { 
    super(props); 

    this.state = { 
     loading: true 
    } 
} 


componentWillMount = async() => { 
    // ... do calls 

    this.setState({ 
     loading: false 
    }) 
} 


render() { 
    if (this.state.loading) { 
     return <Loading/> 
    } else { 
     return (
      // Some other components that needs the information from the calls 
     ) 
    } 

} 
} 

Gibt es Weg, weniger Boilerplate zu haben? Ich habe Higher Order Components mit reagieren gesehen. Ich dachte vielleicht eine Komponente, die eine Funktion der Aufrufe erhalten würde und eine Komponente, die nach der Funktion rendert.

const loader = (calls) => (WrappedComponent) => { 
    return class Loader extends React.Component { 

     constructor (props) { 
      super(props); 
      this.state = { 
       loading: true 
      } 
     } 

     componentWillMount =() => { 
      // execute calls function 
     }; 

     render() { 
      return this.state.loading ? <Loading/> : <WrappedComponent {... this.props }/> 
     } 
    } 

}; 

export default loader; 

Aber ich habe keinen Weg gefunden, eine Anruffunktion in die Ladefunktion zu übergeben.

Answer 1

Sicher können Sie es mit einem HOC tun.

Lassen Sie uns sagen, dass Ihre Funktion etwas entlang der Linien von

const yourFunction =() => { 
    return 'A value'; 
} 

ist Dann können Sie einfach Ihre HOC als zweiter Parameter übergeben es:

const loader = (WrappedComponent, someFunction) => { 
    return class Loader extends React.Component { 

     constructor (props) { 
      super(props); 
      this.state = { 
       loading: true, 
       value: '', 
      } 
     } 

     componentWillMount =() => { 
      // execute the function you passed it 
      this.setState({value: yourFunction()}); 
     }; 

     render() { 
      const { loading, value } = this.state; 
      return loading ? <Loading/> : <WrappedComponent value={value} /> 
     } 
    } 

}; 

Dann Ihre Komponente mit ihm einwickeln:

Alternativ können Sie Ihre HOC in eine andere HOC wickeln, um Dinge wie tha zu übergeben t ..