javascript - 如何在多个页面之间共享同一个 React 组件的状态？

Question

我有一个带有开关(打开或关闭)的 React 组件。开/关状态由组件自身的状态(this.state)处理。

但我希望当用户从一个页面转到下一个页面时保持该状态。例如，它们位于 home.html 上，然后当用户单击另一个页面(如 about.html)时。

此外，这不是单页应用。我需要 Redux 或 Mobox 或其他状态管理工具吗？欢迎提出建议。

Answer 1

But I want that state to remain when the user goes from one page to the next.

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

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 ...
  }
}

Also this is not a single page app. Do I want Redux or Mobox or some other state management tool? Suggestions are welcomed.

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