如何防止点击按钮后，在按钮旁边呈现一个新的组件。

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的右侧，以水平的方式（左侧有一些搜索过滤器，一些下拉菜单&datepickers），但我想在这个搜索过滤器下面渲染组件数据。谁能告诉我如何实现这个目标？

Answer 1

请注意，我假设你是在btn旁边渲染了一个组件的数据。 我假设你在你的代码段中，在同一个地方渲染了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
}