Question

我看过很多加载器插件适用于Mount生命周期，但没有更新部件，我想知道如何处理它？</ p>

我尝试过的是父母的设置：

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

我也尝试使用Will方法..它的效果更差：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>
  )
}

ReactJS在子组件更新时显示加载器

1 个答案: