Question

当我单击它时，我有一个按钮，它将在当前组件中呈现其他组件的数据（即，从API获取数据）。但是它在按钮旁边呈现：

<Button variant="contained" color="primary" style={{marginLeft: 80 , marginTop: 35 , marginBottom: 10}} onClick={this._onButtonClick}>
  Search
</Button>
{this.state.showComponent ?
  <NewComponent A = {this.state.a} B = {this.state.b} C = {this.state.c} D = {this.state.d}/> : null
}

实际上，此按钮以水平方式位于div的右侧（左侧有一些搜索过滤器，包括一些下拉菜单和日期选择器），但我想在此搜索过滤器下方呈现组件数据。谁能告诉我如何实现这一目标？

Answer 1

注意：：我假设您在代码段中的同一位置渲染了Button和NewComponent。请共享整个组件，以更好地了解您的问题。

您必须将NewComponent移到具有所有搜索过滤器和按钮的div之外。

...
<div>
  // ...search filters
  <Button variant="contained" color="primary" style={{marginLeft: 80 , marginTop: 
    35 , marginBottom: 10}}
   onClick={this._onButtonClick}
 >
   Search
 </Button>
</div>

{this.state.showComponent ?
   <NewComponent A = {this.state.a} B = {this.state.b}
   C = {this.state.c} D = {this.state.d}/> : null
}

单击按钮后如何防止在按钮旁边呈现新组件

1 个答案: