如何强制 React 组件重新渲染？

debugcn 发表于 Dev

潘卡伊

我们正在开发一个 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>;

在属性详细信息组件中，有两个引导程序 4 个选项卡 1. 概览（默认处于活动状态） 2. 联系我们

问题是，

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

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

所以为了解决这个问题，我尝试使用“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它会更新传递给组件的键，所以每次打开一个属性新键，将被传递，新的组件实例将被打开，你不会再遇到这个问题

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。