如何在不刷新的情况下在同一选项卡的新页面上打开 ReactJS 组件(在本例中为"图形")？

Question

当我单击"显示图形"按钮时，我的"图形"组件在底部的同一页面上呈现数据，但我希望当我单击按钮时，它应该在同一选项卡中的新页面上呈现图形组件。

渲染代码 ：

return(      
<div className="mainn">
<div>
<h4>Toilet Search:</h4>
<form>
<input type="text" onChange={this.searchHandler}/>
</form>
<h3>List of Toilets</h3>
<table  className="gfg">
<tr className="head">
<th>Toilet ID  </th>
<th>Toilet's Location  </th>
<th>GeoLocation</th>
</tr>
{toilet.filter(searchingFor(this.state.term)).map(developer => (
<div
key={developer.uid}
className="card"        
>      
<tr>
<td className="tid">{developer.tid}</td>  
<td className="loc">{developer.location}</td>
<button
onClick={() => this.setState({
selectedDeveloperId:developer.tid
})}
>
Show Graph
</button>
<td>{developer.geoLoc}</td>
</tr>
</div>
))}
</table>  
{!!this.state.selectedDeveloperId && (<Graph tid={this.state.selectedDeveloperId}/>)}
</div>
</div>
)

}

Answer 1

是否要使用图表更新当前页面？ 如果是这种情况，请先让您的渲染检查 developerId，用于渲染表单和表格：

<div>
{this.state.selectedDeveloperId ? 
(<Graph tid={this.state.selectedDeveloperId}/>) :
(<div>
{Here goes your h4, form and table}
</div>)}
</div>