ReactJS顯示加載器子組件更新

我已經看到很多加載器插件工作的生命週期，但沒有更新的一部分，我不知道如何處理它？ReactJS顯示加載器子組件更新

我試過了以下設置父：

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

這是孩子調用方法：

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

我還試圖用意志方法..這比以前更加沃瑟：D 任何想法如何實現這個？我用流量反應，但現在不用如何使用它在這種情況下..

來源

2016-11-17 Stefan

爲什麼不在調用動作的承諾中調用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> 
) 
}

來源

2016-11-17 19:01:05

好點。但它仍然不起作用。奇怪的是，當我也使用了一個文本變量並且在hide/showLoader中改變了它的值。我可以看到文本正在改變，但不是樣式......此行爲與我的和您的版本一同出現。編輯：加載程序保持始終隱藏，永遠不會看到。 – Stefan

我編輯了我的答案 –

我之前嘗試過類似的方法，但是我感覺這不起作用，因爲狀態不會在要求時立即放棄，而是承諾稍後再放棄。不知道，只是在我看來，我讀了類似的東西。所以，在這個邏輯中，如果我在計算函數中設置了可見狀態。 JS移動到從服務器獲取數據的操作，同步請求將保留的重新渲染和之後的setState設置爲可見的加載器，並顯示結果。那麼，加載程序永遠不會出現？也許？他還沒有。仍然感謝努力 – Stefan

ReactJS顯示加載器子組件更新

回答

相關問題