如何在组件之间传递状态/道具

Question

我有App.js中列出的所有组件。关于如何将值从一个组件传递到另一个组件，我有点迷失。

这是它应该如何工作：

在第一个组件（ItemList）中选择项目时，详细信息将加载到第二个组件（ItemDetails）中。然后在第二个组件中，如果我单击“添加”，它将被添加到第三个组件（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。

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

对于在React应用程序中发生变化的任何数据，应该有一个“真实来源”。

对于你的情况，那个单一的“真相来源”应该是你的App组件 - 与ItemList，ItemDetails和ItemSelection对话的组件。

组件之间的通信流程应如下所示：

ItemList

• 我应该展示哪些物品？ App将在道具中告诉我。
• 单击其中一个列表项时，我该怎么办？ App将在道具中告诉我。

ItemDetails

• 我应该在哪个项目中显示详细信息？ App将在道具中告诉我
• 点击“选择此项”按钮后我该怎么办？ App将在道具中告诉我。

ItemSelection

• 我应该展示哪些物品？ App将在道具中告诉我。

App

• 我应该告诉ItemList要显示哪些项目？我将传递我从LIST_ITEMS.json得到的东西
• 我应该告诉ItemDetails显示详细信息的哪个项目？我会在我的state中保持这个currentItem。最初，不会显示任何项目的详细信息。 如果点击ItemList中的一个项目，那么我需要将我的州的currentItem更改为点击的项目。 （提示：App需要一个函数，并且此函数的回调需要传递给ItemList）
• 我应该告诉ItemSelection要显示哪些项目？我会在我的state中保持这个selectedItems。最初，不会选择任何项目。 如果当前在ItemDetails中显示的项目是“已选中”，那么我需要将当前显示的项目添加到我的selectedItems数组中。 （提示：App需要一个函数，并且此函数的回调需要传递给ItemDetails）

---

Key Takeaways

• App应保持state与currentItem显示在项目详细信息和selectedItems将显示在项目选择列表中。
• App需要一些操纵currentItem和selectedItems状态的函数。
• App需要将这些函数回调传递给孩子们。
• 从本质上讲，孩子们扮演的是显示假人：“只要告诉我需要展示什么，告诉我如果有人点击这里的东西我应该怎么做。”

---

我编写了一个基本的例子，说明了这一切的实际效果。通过研究并将其应用于您的情况，这可以让您更好地了解如何让组件“相互通信”。