如何在组件之间传递 states/props

Question

我拥有 App.js 中列出的所有组件。我有点不知道如何将值从一个组件传递到另一个组件。

它应该是这样工作的：

当在第一个组件 (ItemList) 中选择一个项目时，详细信息将加载到第二个组件 (ItemDetails) 中。然后在第二个组件中，如果我单击 "add"，它会添加到第三个组件 (ItemSelection)。

如何将 ItemList 中点击的项目传递给 ItemDetails，然后在单击按钮时将其传递给 ItemSelection？

App分量：

// dummy selectedItems array
let selectedItems = [
  {
    'name': 'item 3',
    'type': ['car'],
    'details': [ 'Detail 1', 'Detail 2', 'Detail 3' ]
  },
  {
    'name': 'item 6',
    'type': ['bike'],
    'details': [ 'Detail 5', 'Detail 1']
  }
]

<Container>
  <ItemList/>
  <ItemDetails/>
  <ItemSelection selected={selectedItems}/>
</Container>

ItemList 分量：

const LIST_ITEMS = require('./LIST_ITEMS.json');

const myList = 
  LIST_ITEMS.data.Items.map((Item) => (
    <li key={Item.id} onClick={() => loadItem(Item.name)}>
      {Item.name.toUpperCase()}
    </li>
  ))
;

function loadItem(name){
  console.log(name);
}

class ItemList extends Component {

  render() {
    return (
      <div id="item-list-wrapper">
        <h3>Select an Item</h3>
        <ul id="item-list">{myList}</ul>
      </div>
    );
  }
}

ItemDetails 分量：

import React, { Component } from 'react';

class ItemDetails extends Component {
  render() {
    <div id="item-details">
      // Additional details about the item
      <button>Add to selection</button>
    </div>
  }
}

ItemSelection分量：

import React, { Component } from 'react';

class ItemSelection extends Component {
  render() {
    <div id="item-selection">
      // List selected items
      <h3>Selected Items</h3>
      <div className="item-slot">
        {this.props.selected[0] ? (
            <div className="selected-details">
                <h4>{this.props.selected[0].name}</h4>
                <ul>
                  <li>{this.props.selected[0].details[0]}</li>
                  <li>{this.props.selected[0].details[1]}</li>
                  <li>{this.props.selected[0].details[2]}</li>
                </ul>
            </div>
        ) : (
          <p>empty</p>
        )}
    </div>
    </div>
  }
}

Answer 1

首先，我会推荐the article, "Lifting State Up", as referenced by @codekaizer in the comments。

您想从文章中获取的主要原则是这个

There should be a single "source of truth" for any data that changes in a React application.

对于您的情况，单个 "source of truth" 应该是您的 App 组件 - 与 ItemList、ItemDetails 和 ItemSelection 对话的组件。

组件之间的通信流程应该是这样的：

`ItemList`

我应该展示哪些项目？ App会在道具中告诉我。
当我的列表项之一被点击时我应该怎么做？ App会在道具中告诉我。

`ItemDetails`

我应该显示哪个项目的详细信息？ App会在道具中告诉我
点击"select this item"按钮后应该怎么办？ App会在道具中告诉我。

`ItemSelection`

我应该展示哪些项目？ App会在道具中告诉我。

`App`

我应该告诉 ItemList 显示哪些项目？我会把我从 LIST_ITEMS.json
我应该告诉 ItemDetails 显示哪个项目的详细信息？我将在 state 中将其保留为 currentItem。最初，不会显示任何项目的详细信息。
- 如果单击了 ItemList 中的一项，那么我需要将我的状态 currentItem 更改为单击的项目。（提示：App需要一个函数，这个函数的回调需要传递给ItemList）
我应该告诉 ItemSelection 显示哪些项目？我将在 state 中将其保留为 selectedItems。最初，不会选择任何项目。
- 如果 ItemDetails 中当前显示的项目是 "selected"，那么我需要将当前显示的项目添加到我的 selectedItems 数组中。（提示：App需要一个函数，这个函数的回调需要传递给ItemDetails）

要点

App 应该维护一个 state，currentItem 显示在项目详细信息中，selectedItems 显示在项目选择列表中。
App 需要一些函数来操纵 currentItem 和 selectedItems 状态。
App 需要将这些函数回调传递给 children.
children，本质上，充当显示假人："Just tell me what I need to display, and tell me what I should do if someone clicks this thing over here."

我已经编写了一个基本示例来说明这一切是如何运作的。通过研究它并将其应用于您的情况，这应该可以让您更好地理解如何将组件获取到 "talk to each other."

如何在组件之间传递 states/props

How to pass states/props between components

reactjs

react-component

`ItemList`

`ItemDetails`

`ItemSelection`

`App`

要点