在按钮单击 React 时呈现一个额外的弹出对话框答案

【问题标题】：rendering an additional pop up dialog on button click React在按钮单击 React 时呈现一个额外的弹出对话框
【发布时间】：2019-05-28 22:37:51
【问题描述】：

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

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

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

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

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

我尝试将其他 ui 元素分离到一个单独的容器中，但这并没有帮助，因为我需要在单击按钮时调用 api，而我现在遇到的整个问题都发生在该子容器中。

我也尝试过上述方法，将单击方法上的父级作为道具传递，并在单击按钮时调用该方法，但不知何故以父/子组件的递归循环结束

这是我的实际代码：

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

这是我的手柄点击功能：


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

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

我对反应和远离 redux、钩子等之类的东西很陌生。

【问题讨论】：

你需要<div>{this.state.loading && <LoadingDialog />}<div>main content</div></div>。这样，您将呈现两者，或仅呈现主要内容。
@ChrisG 那太完美了。非常感谢。另外，在一个组件中渲染这么多东西是不是一个坏主意？

标签： javascript reactjs material-ui

【解决方案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>
    )
}

【讨论】：