在路由更改时保持 dom 状态答案

【问题标题】：Persist dom state on route change在路由更改时保持 dom 状态
【发布时间】：2019-11-20 22:54:08
【问题描述】：

我在不同的路线上有两个组件。我想知道如何在路由更改时保持 DOM 元素处于相同状态。例如，当导航回同一个组件时，我希望所有 DOM 元素都应用与路由更改之前相同的 css 类。

我尝试过 redux persist 并使用带有 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;

【问题讨论】：

添加一些代码，如果可能的话再添加一些图像。它将帮助社区清楚地了解您想要什么。添加您尝试过的内容（最少部分）。

标签： reactjs redux react-router

【解决方案1】：

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

Redux persist 应该可以工作。只保留影响 DOM 当前显示方式的所有状态。之后，在组件内部，您应该检查是否存在持久状态。如果是，那么你不应该做任何改变而只是渲染。

【讨论】：

谢谢，我确实有组件级别的状态，它使用 setState 进行了更改，并且通过用户与 jquery 的交互将类添加到 dom。我唯一确定的想法是组件在 rout 更改时卸载并重新安装，但来自 redux 存储的数据仍然存在。难道是构造函数中的组件级状态导致重新渲染？我确实尝试将其取出，但没有任何区别。我从网上尝试了很多东西，但似乎没有任何效果。我在 app.js 中定义了路线，并使用链接标签进行导航。
React 组件在从 DOM 中移除时总是会卸载（不再显示在 Web 中）。对不起，这里有什么问题？
问题是我想向用户显示页面的先前访问状态，而不是重新呈现的状态。
是的，就像我说的那样。将组件级别的状态存储在 redux 中，专门为此创建一个新的 reducer。并在您的组件中添加检查逻辑以查看是否已经存在持久值。
好的我认为问题是我通过 jquery 添加 css 并且没有持续存在。我必须使用 jquery，因为有多个 html 元素，因此需要使用 jquery 方法（即父、子等）遍历 dom。

【解决方案2】：

你可以使用 react 的 shouldComponentUpdate()，它默认返回 true，允许组件重新渲染。如果有用，您可以添加逻辑以返回 false，这不会重新渲染所有组件。尽管您可以参考link 了解更多详细信息，但这并不是公认的最佳做法。

【讨论】：

我确实尝试过，但它完全阻止了页面加载。只是显示了一个空白页。