小编pan*_*kaj的帖子

我们正在开发一个 POC，其中显示属性列表，并在单击属性标题时在引导模式弹出窗口中显示相应的属性详细信息。

我们有以下具有层次结构的 React 组件：

1 个属性框

1.1 属性列表

1.1.1 属性信息

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">&times;</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. 联系我们

问题是，

假设我通过单击“属性”标题打开了属性详细信息弹出窗口，然后转到“联系我们”选项卡并关闭了弹出窗口。

之后，我单击“下一个属性标题”以查看其属性详细信息。在这种情况下，弹出窗口将打开，显示相应的属性详细信息，但“联系我们”选项卡显示为活动状态。

因此，为了解决这个问题，我尝试使用方法“componentWillReceiveProps”重新渲染 PropertyDetails 组件

class PropertyDetail …