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

Question

有一个状态 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>
    );
  }

Answer 1

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