javascript - react中如何判断state来返回不同的值？

问题描述

问 题

有一个状态 this.state.loading 默认为true，
当页面加载完成时会变为false， 如何根据state返回不同的值？

render代码

render() {
    if(this.state.loading){
        return (
          <div style={{height: "100%"}}>
            <section className="loaders">
              <span className="loader loader-quart"> </span> Loading...
            </section>
            <WebView
              ref="view"
              src={this.state.webviewTarget}
              preload="../renderer/windows/WebView"
            />
          </div>
        );
    }else{
        return (
          <div style={{height: "100%"}}>
            <WebView
              ref="view"
              src={this.state.webviewTarget}
              preload="../renderer/windows/WebView"
            />
          </div>
        );
    }
  }

这样是可以实现。

但是我想问，能否根据this.state.loading的值来 是否返回这段代码。

<section className="loaders">
  <span className="loader loader-quart"> </span> Loading...
</section>

大致的意思就是

render() {
    return (
      <div style={{height: "100%"}}>
          // 这里加个判断语句
          if(this.state.loading){
            <section className="loaders">
              <span className="loader loader-quart"> </span> Loading...
            </section>
        }
        
        <WebView
          ref="view"
          src={this.state.webviewTarget}
          preload="../renderer/windows/WebView"
        />
      </div>
    );
  }

解决方案

return (
 <div style={{height: "100%"}}> { this.state.loading ? 
  <section className="loaders"><span className="loader loader-quart"></span> Loading... 
    </section> :
  <WebView ref="view" src={this.state.webviewTarget} preload="../renderer/windows/WebView"/>   
 }</div>
)

这篇关于javascript - react中如何判断state来返回不同的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！