Question

我在单独的路线上分别拥有两个组成部分。我想知道如何在更改路线时使DOM元素保持相同状态。例如，当导航回同一组件时，我希望所有DOM元素都具有与更改路线之前相同的CSS类。

我尝试过redux持久化并使用带有switch的嵌套路由，但是这些似乎都不起作用。从我所做的研究来看，React总是会在路线更改时安装和卸载组件，而我还没有找到防止这种情况发生的方法。

我希望在返回到test1时保留红色背景色。

class test1 extends React.Component {
    constructor(props) {
        super(props);
    }

    addClassFucn = event => {
        $(event.target).parent().css("background-color", "red")
    }

    renderButton() {
        return (
            <div>
                <div>
                    <button onClick={this.addClassFucn}>Click me</button>
                    <Link to="/test2" className="ui button primary back" >
                        test2
                    </Link>
                </div>
            </div>
        )
    }

    render() {
        return (
            <div>
                <div>This is test 1{this.renderButton()}</div>
            </div>
        );
    }
}

export default test1;


class test2 extends React.Component {
    constructor(props) {
        super(props);
    }

    renderButton() {
        return (
            <div>
                <Link to="/test1" className="ui button primary back" >
                    back
                </Link>
            </div>
        )
    }

    render() {
        return (
            <div>
                <div>This is test 2{this.renderButton()}</div>

            </div>
        );
    }
}


export default test2;

Answer 1

这实际上取决于维护组件状态的逻辑。

Redux持久应该工作。只需保留所有影响DOM当前显示方式的状态。然后，在组件内部，应检查是否存在持久状态。如果是这样，则您不应进行任何更改，而只需渲染即可。

Answer 2

您可以使用react的 shouldComponentUpdate（），该默认情况下返回true，以允许组件重新呈现。如果有用，则可以添加逻辑以返回false，这将不会重新渲染所有组件。尽管您可以参考此link了解更多详细信息，但这不是最佳实践。

改变路线时的持久状态

2 个答案: