ReactJS子コンポーネントのローダーを表示する

Question

マウントライフサイクルで動作するローダープラグインが多数ありましたが、アップデートの部分はありませんでした。私はまたしてもworser働いていたウィル方法..を使用しようとした

class Childextends React.Component { 

constructor() { 
    super(); 
    this.state = {results:[]}; 
    this.calculate = this.calculate.bind(this); 
} 

calculate(dict) { 
     this.props.showLoader(); 

     Actions.action(dict) 
      .then(results => { 
      this.setState({results: results}); 
      }) 
      .catch((err) => { 
       var errResp = JSON.parse(err.response); 
       console.log(errResp); 
       this.setState({responseErrors: errResp}); 
     }); 
} 
componentDidMount() { 
    this.props.hideLoader(); 
} 
componentDidUpdate() { 
    this.props.hideLoader(); 
} 

componentWillReceiveProps(values){ 
    this.setState({results:values.results}); 
} 

render() { 
     return (
      /*stuff to be returned*/ 
     ) 
} 
} 

：

class App extends React.Component { 
    constructor() { 
     super() 
     this.state = {loader_wrap:false}; 
     this.hideLoader = this.hideLoader.bind(this); 
     this.showLoader = this.showLoader.bind(this); 
    } 

hideLoader(){ 
    this.setState({loader_wrap: false}); 
} 

showLoader() { 
    this.setState({loader_wrap: true}); 
} 

render() { 
    var loaderStyle; 
    if (this.state.loader_wrap) { 
    loaderStyle = {display:"block"}; 
    } else { 
     loaderStyle = {display:"none"}; 
    } 

return (
     <div> 
     <div id="content"> 
      {React.cloneElement(content, { 
       hideLoader: this.hideLoader, 
       showLoader: this.showLoader 
       })} 
     </div> 
      <div id="loader-wrap" style={loaderStyle}> 
       <img className="loader hidden-sm hidden-xs" src='source/file/'> 
      </div> 
     </div> 
) 
} 
} 

そして、これは、メソッドを呼び出す子である：私が試した何

は、親のためのセットアップ以下の通りでした：D これを実装する方法はありますか？私はフラックスと反応しますが、今の場合はこの使用方法はありません。

Answer 1

アクションの約束のコールバックでhideLoader（）を呼び出すだけではどうですか？

class Childextends React.Component { 

    constructor() { 
    super(); 
    this.state = {results:[]}; 
    this.calculate = this.calculate.bind(this); 
} 

calculate(dict) { 
    this.props.showLoader(); 

    Actions.action(dict) 
     .then(results => { 
     this.setState({results: results}); 
     }) 
     .catch((err) => { 
      var errResp = JSON.parse(err.response); 
      console.log(errResp); 
      this.setState({responseErrors: errResp}); 
     }) 
     .then(() => {    
     this.props.hideLoader(); 
     }); 

} 

render() { 
    return (
     /*stuff to be returned*/ 
    ) 
    } 
} 

編集：だけでなく親コンポーネントへの異なるアプローチ - それは必要とされない場合、むしろスタイルを持つ要素を隠すよりも、それをレンダリングされません。

render() { 
    return (
    <div> 
    <div id="content"> 
     {React.cloneElement(content, { 
      hideLoader: this.hideLoader, 
      showLoader: this.showLoader 
      })} 
    </div> 

    {this.state.loader_wrap && 
     <div id="loader-wrap" style={loaderStyle}> 
      <img className="loader hidden-sm hidden-xs" src='source/file/'> 
     </div> 
    } 
    </div> 
) 
}