Question

我正在使用react-router路由到两个彼此独立的视图。目前我一直在Home和Backend中使用新的状态对象，但我想摆脱它，因为它们都包含嵌套组件。

class App extends Component {
  render() {
    return (
        <Router>
          <div className="App">
            <Route exact={true} path="/" component={Home} />

            <Route path="/app/:user_id" component={Backend} />
          </div>
        </Router>
    );
  }
}

如何在不使用其他框架（如redux或flux？）的情况下共享视图之间的状态？

Answer 1

将状态升级为您的应用程序＆＃39;组件，然后传递每个组件通过其道具所需的状态元素。

例如，您在App中的状态可能如下所示：

App.state = {
  homeRelatedStuff: {...},
  backendRelatedStuff: {...},
  sharedStuff: {...}
}

然后在声明要使用哪个组件时，传递道具：

<Route path={"/"} component={() => <Home homeStuff={this.state.homeRelatedStuff} sharedStuff={this.state.sharedStuff}/>}/>

*请注意将组件列为函数的略有不同的方法，以便您可以传递道具

你的州不必像我一样将它们分开，它可能更平坦，你可以将多个道具传递给每个组件

React：如何使用react-router在视图之间共享状态？

1 个答案: