如何在多个页面之间共享同一个 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 不是必需的，它们是状态容器，有办法持久化到 localstorage （例如redux-localstorage和mobx-localstorage），但关键只是持久化到 localstorage 。