如何強制React Component重新渲染？

Question

我們正在開發一個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">&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. ContactU

問題是

考慮到我通過單擊“屬性”標題打開了屬性詳細信息彈出窗口，然后轉到“聯系我們”選項卡並關閉了該彈出窗口。

之后，我單擊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 個解決方案

解決方案1
3 已采納 2019-05-14 09:44:52

如何強制React Component重新渲染？

問題描述

1 個解決方案

解決方案1 3 已采納 2019-05-14 09:44:52

解決方案1
3 已采納 2019-05-14 09:44:52