Question

我有一个带有切换功能的React组件（打开或关闭）。开/关状态由组件自己的状态（this.state）处理。

但我希望当用户从一个页面转到另一个页面时保持该状态。例如，他们在home.html上，然后当用户点击另一个页面时，例如about.html。

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

Answer 1

但我希望当用户从一个页面转到另一个页面时保持该状态。

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

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），但关键是持久到本地存储。

Answer 2

如果您不移动页面（整个页面刷新）并且仅使用不同的组件，那么您可以简单地在父组件中定义状态并将其传递给子组件以及将切换状态的函数。

功能如下：

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

将此函数作为prop组件传递给子组件。

在子组件中使用它

This.props.toggle（newState）;

**但是如果它跨越多个页面，你可以去localstorage **

希望这可以解决您的问题。

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

2 个答案: