如何在多个页面上共享同一React组件的状态？

Question

我有一个React组件，上面有一个开关（打开或关闭）。 开/关状态由组件自己的状态（this.state）处理。

但是我希望当用户从一页转到下一页时保持该状态。 例如，它们在home.html上，然后在用户单击到诸如about.html之类的另一个页面时出现。

而且这不是一个单页面的应用程序。 我是否需要Redux或Mobox或其他状态管理工具？ 欢迎提出建议。

Answer 1

但是我希望当用户从一页转到下一页时保持该状态。

如评论中所述，最直接的方法可能是将状态存储到本地存储，并在组件安装时检索状态。

class Toggle extends Component {
  componentDidMount() {
    const storedValue = localStorage.getItem("my_value");
    if (storedValue) {
      this.setState({ value: storedValue });
    }
  }
  handleChange = e => {
    const value = e.target.value;
    this.setState({ value });
    localStorage.setItem("my_value", value);
  }
  render() {
    return ...
  }
}

而且这不是一个单页面的应用程序。 我是否需要Redux或Mobox或其他状态管理工具？ 欢迎提出建议。

不，Redux和Mobx不是必需的，它们是状态容器，可以持久存储到本地存储（例如redux-localstorage和mobx-localstorage ），但是关键只是持久存储到localstorage。

Answer 2

如果您不移动页面（整个页面刷新），而仅使用不同的组件，则只需在父组件中定义一个状态，然后在子组件中传递该状态以及可切换状态的函数即可。

函数如下所示：

ToggleState = newState => this.setState（{myState：newState}）;

将此功能作为道具传递给子组件。

在子组件中将其用作

this.props.toggle（newState）;

**但是如果跨多个页面，则可以进行本地存储**

希望这能解决您的问题。