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）

要点

App应该维护state，其中currentItem将显示在项目详细信息中，而selectedItems将显示在项目选择列表中。
App需要一些用于操纵currentItem和selectedItems状态的函数。
App需要将这些函数回调传递给子代。
从本质上讲，孩子们充当展示假人：“只要告诉我我需要展示的东西，并告诉我如果有人在这里点击这个东西该怎么办。”

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

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

1 个答案:

`ItemList`

`ItemDetails`

`ItemSelection`

`App`

要点