すべてのコンポーネントにコンポーネントを読み込む

Question

私のリアクションWebアプリケーションには、ページコンポーネントがあります。ページコンポーネントは、子コンポーネントの非同期呼び出しを行います。今私はすべてのページでこれをする必要があります

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

} 
} 

定型文を少なくする方法はありますか？私は反応がある高次コンポーネントを見ていました。おそらく、呼び出される必要のある機能と、機能の後にレンダリングされるコンポーネントの機能を持つコンポーネントだと思っていました。

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; 

しかし、私はローダー関数に呼び出し関数を渡す方法を考え出していません。

Answer 1

もちろん、HOCを使用して行うことができます。

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

}; 

は次にそれを使用してコンポーネントをラップ：

のは、あなたの関数が

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

の線に沿って何かその後、あなたは、単に2番目のパラメータとしてごHOCに渡すことができているとしましょう

const EnhancedComponent = Loader(WrappedComponent, yourFunction); 

また、別のHOCでHOCをラップして、thaのようなものを渡すこともできますt ..