0

我想使用在组件 1 中搜索到的数据（这是一个允许您搜索食谱的页面，然后它会给出一个带有名称成分和说明的食谱）并在第 2 页中使用它（将允许您查看食谱然后在商店 API 中搜索成分）

App.js
class App extends Component {
  render() {
    return(
      <Router>
      <div>
        <Route exact path = '/' component = {Search}/>
        <Route exact path = '/shopping/' component = {Store}/>


      </div>
      </Router>
    )
  }
}


export default App;


Class Component 1
    class Search extends Component {
      state = {
        drinks: [],
        userInput: "",
        selectedDrink: null,
        recipeName: "",
        recipeInstructions: "",
        recipeIngredients: ""
      };

Class component 2
    class Store extends Component {
      state = {
        recipe: []
      };
4

2 回答 2

2

这取决于您的应用程序的大小，但有两个主要选项：

  1. 向上移动状态：您将组件包装到一个组件（您可能已经拥有）中，并将您需要的所有状态设置到该更高组件中，并通过 props 将其传递下来。子组件通过回调传递数据并更新父状态。这对于小型应用程序和紧密耦合的数据很有用。
  2. 对于中型/大型应用程序，您希望使用像redux或mobx这样的状态管理库。这为您提供了一种高性能且独立的方式来存储大量数据并在不同组件之间轻松共享。这种方法有更多的开销和更大的学习曲线，但对于大型应用程序来说是必需的。

希望这可以帮助。

于 2019-08-08T20:24:36.520 回答
0

每个组件都有一个属性。每个反应组件都有一个道具属性。每当组件的 props 或状态发生变化时，render() 函数就会自动运行，并刷新组件本身。

因此，您可以使用 props 将一个组件的状态传递给另一个组件。 https://reactjs.org/docs/components-and-props.html

您还可以使用 Redux 跨组件全局管理状态 https://react-redux.js.org/

于 2019-08-08T20:24:07.743 回答