我们正在开发一个POC，其中将显示属性列表，并在单击属性标题时在引导程序模式弹出窗口中显示相应的属性详细信息。
我们具有以下具有层次结构的React组件：
1个PropertyBox
1.1属性列表
1.1.1 PropertyInfo
1.2 Bootstrap Modal弹出HTML中的PropertyDetails。
PropertyBox的render方法包含以下代码。
render() {
return (
<div id="property-box">
<PropertyListComponent>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-box-large">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body modal-max-height">
{propertyDetailsElement}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>;
在属性详细信息组件中，有两个bootstrap 4选项卡
1.概述（默认情况下处于活动状态）
2.联系我们
问题是，
考虑到我通过单击“属性”标题打开了属性详细信息弹出窗口，然后转到“联系我们”选项卡并关闭了该弹出窗口。
之后，我单击Next属性标题以查看其属性详细信息。在这种情况下，将打开弹出窗口，显示相应的属性详细信息，但“联系我们”选项卡显示为活动状态。
因此，为了解决该问题，我尝试使用方法“ componentWillReceiveProps”重新渲染PropertyDetails组件。
class PropertyDetail extends React.Component {
constructor(props) {
super(props)
// in state we have stored the images as well as current index of image and translate value
this.state = {
property: this.props.data
}
}
componentWillReceiveProps(nextProps) {
this.setState({
property: nextProps.data
})
}
render() {return (<HTML for Proeperty Details>);
}
}
我已经交叉验证了，当我单击PropertyTitle打开弹出窗口时，是否每次都调用方法“ componentWillReceiveProps”，是的，每次都调用它。但是问题没有解决。
我希望每次打开“属性详细信息”弹出窗口时，默认的活动选项卡应为“概述”选项卡。
有什么解决办法吗？
最佳答案
有两种方法可以实现此目的。
1）更改属性时，添加一个默认函数componentWillUnMount它将从dom中删除该组件，并将重置其属性
或者你可以使用
在您的组件中，您可以调用this.forceUpdate()方法来强制重新渲染。
2）第二个方法是每当您更改property时都将一个密钥传递给组件，它将每次更新传递给该组件的密钥，因此每次打开一个属性new key都会被传递，并且新的组件实例将打开，您将不再面对这个问题
关于javascript - 如何强制React Component重新渲染？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56127197/