javascript - 在按钮单击 React 上渲染一个额外的弹出对话框

Question

我在渲染弹出加载屏幕时遇到问题。因此，假设我有一个名为( LoadingDialog )的导入组件，并且我希望它在状态属性 loading 为真时呈现。当用户单击当前组件上的按钮时，它会触发一个 api 调用，该调用也会将加载状态更改为 true，从而呈现加载对话框。

我知道我可以使用条件渲染来实现这一点，例如:

 if(this.state.loading){
      return (
        <div>
        <LoadingDialog />
        </div>

      )
    }
    else{
      return(
      <div> OTHER UI ELEMENTS </div>
     )

但现在我遇到了一个问题，因为当我的 loadingDialog 被渲染时，我的其他 ui(文本区域、背景卡、按钮)全部消失，这与我试图实现的相反。使用这种方法，我只能显示我的实际 ui 元素或加载对话框。

我已经尝试将其他 ui 元素分离到一个单独的容器中，但它无济于事，因为我需要在单击按钮时调用 api，而我现在遇到的整个问题都发生在该子容器中。

我还尝试了上述方法，将点击方法的父​​级作为 Prop 传递，并在单击按钮时调用它，但不知何故以父/子组件的递归循环告终

这是我的实际代码:

 if(this.state.loading){
      return (
        <div>
        <LoadingDialog />
        </div>

      )
    }
    else{
      return (
        <div>
          <Card className="center card">
            <div className="row">
              <div class="column" >
                <TextField
                  id="outlined-name"
                  name="searchContent"
                  onChange={this.handleChange}
                  value={this.state.searchContent}
                  label="Name"
                  variant="outlined"
                />
              </div>
              <div className="column">
                <Button
                  variant="outlined"
                  color="primary"
                  onClick={this.handleClick}
                >
                  Search
                </Button>
              </div>
            </div>
          </Card>
        </div>
      );
    }

这是我的 handle 点击功能:

  handleClick = (event, name) => {
    this.setState({loading : true})
    fetch(uri)
      .then(res => res.json())
      .then(data => {
        console.log(data);
        this.setState({loading : false})
      });
  };

正如我之前所说，我尝试将 else block 上的 UI 位分离到不同的组件，但问题仍然存在。再总结一下， 我只能呈现我的实际 ui 或弹出框，但不能在任何给定时间同时呈现两者。 如果需要，我希望能够同时渲染两者。

我对 react 很陌生，远离 redux、hooks 等。

Answer 1

已解决，感谢 Chris G

因此，通过使用逻辑与运算符检查加载是真还是假，问题很容易解决，就像这样 {this.state.loading && <LoadingDialog />}

例如。

render(){
   return(
     <div>
       {this.state.loading && <LoadingDialog />}
     <div>
        //REST OF THE STUFF THAT SHOULD BE RENDERED REGARDLESS
     </div>
    </div>
    )
}