Question

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

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

1 PropertyBox

1.1 PropertyList

1.1.1 PropertyInfo

Bootstrap Modal弹出HTML中的1.2 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>;

在“属性详细信息”组件中，有两个引导4选项卡 1.概述（默认情况下处于活动状态） 2. ContactUs

问题是，

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

此后，我单击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”，是的，每次都调用它。但是问题没有解决。

我希望每次打开“属性详细信息”弹出窗口时，默认的活动选项卡应为“概述”选项卡。

有什么解决办法吗？

Answer 1

有两种方法可以实现这一目标。

1）更改属性时，添加一个默认函数

componentWillUnMount将从dom中删除该组件，并重置其属性

或者您可以使用

在组件中，您可以调用this.forceUpdate()方法来强制重新渲染。

2）第二个方法是，每当您更改property时，都将一个密钥传递给组件，它将更新传递给该组件的密钥，因此每次打开一个新属性时，都会传递该密钥，并且新的组件实例将打开，您将不会再遇到此问题

如何强制React Component重新渲染？

1 个答案: