Question

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

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

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

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

但是现在我有一个问题，因为在渲染我的loadDialog时，我的其他用户界面（文本区域，背景卡，按钮）全部消失了，这与我试图实现的目的相反。使用这种方法，我只能显示实际的ui元素或加载对话框。

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

我还尝试了上述方法，将click方法的父级传递为道具，并在单击按钮时调用它，但是以某种方式最终导致父/子组件的递归循环

这里是我的实际代码：

 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，hook等。

Answer 1

已解决，感谢克里斯·克

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

例如

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

在按钮上点击“ React

1 个答案: