在React中单击组件时，如何在数组中呈现特定对象？

Question

Codesandbox链接。

好的，所以我想要这个应用程序执行的高级功能：

1. 加载后，左侧将显示您的字符，右侧将显示一个简介屏幕。
2. 例如，当用户单击第一个字符（云）时，介绍屏幕将替换为云的统计信息。 如果用户单击第二，第三等字符，则相同。 右侧的简介屏幕将替换为该角色的特定统计信息。

基本上就是这样。 由于某种原因，我发现很难做到。

对于/ components /文件夹的细目分类（我将重点介绍）：

• / components / content /-字符信息存放在该州的位置。 每个字符都由一个“ id”唯一标识。
• / components / sidebar /-这是侧边栏组件
• / components / card-overview /-这是一个重复了几次的单一组件，其中包含您在侧边栏本身中看到的每个字符（图像，字符名称）的“概述”
• / components / card-detailed /-在这里，它从/ components / content /获取对象数组，过滤通过并将当前看到的字符映射到DOM。 问题是，在此组件的第13行上，您将看到我已经在ID号中进行了硬编码。 显然，我希望将其更改为用户单击的任何字符，然后将该字符的信息加载到DOM。 我只是不知道该怎么做。

简而言之，我正在尝试做的是：

• 单击左侧的字符后，隐藏右侧的所有内容，并用该字符的信息替换。

Answer 1

我打算在这里工作： https : //codesandbox.io/s/l2lqm76z0q

正如克里斯指出的那样，方法是使用反应状态。 因此，我引入了一个默认选择项4的状态，并创建了一个handleClick函数，当您在侧边栏中单击一个项目时，该函数将触发。 它们都是在App.js中创建的：

  state = {
    selected: 4
  };

  handleClick = id => {
    this.setState({ selected: id });
  };

现在，我将handleClick函数转移到了需要的地方，在本例中是在Sidebar.js中：

<Sidebar onClick={this.handleClick} />

并且当前选择的项目需要转移到您的内容中（同样，在需要的地方）。

<Content selected={this.state.selected} />

在边栏中，我再次将handleClick函数发送给具有相关id（*）的子项CardOverview：

<CardOverview
  image={cloudImage}
  name="Cloud Strife"
  onClick={() => this.props.onClick(1)}
/>

最后，在CardOverview中，我们使用了传递给我们的函数：

<section className="card-overview" onClick={this.props.onClick}>
...
</section>

（无论它是否正常工作，我们都会在控制台中看到-单击项目时，它应该显示具有当前所选项目ID的状态。）

现在，在content.js中，我们使用selected值，并将其向下传递给CardDetailed，在这里我们可以通过以下方式使用它：

// Grab the 'characters' object from App.js, and assign it to 'this.props'
const { characters, selected } = this.props;

// Filter the chracters and return only whose 'id' belongs to that of the selected one
const filteredCharacters = characters
  .filter(character => character.id === selected)
  .map(character => (
     <div className="characters" key={character.id}>
       <p>Name: {character.Name}</p>
       <p>Job: {character.Job}</p>
       <p>Age: {character.Age}</p>
       <p>Weapon: {character.Weapon}</p>
       <p>Height: {character.Height}</p>
       <p>Birthdate: {character.Birthdate}</p>
       <p>Birthplace: {character.Birthplace}</p>
       <p>Bloodtype: {character.Bloodtype}</p>
       <p>Description: {character.Description}</p>
      </div>
));
...

就是这样。

（*）请注意，我没有改进您的代码，只是使它起作用。 我看到您应该解决的几个问题。 例如，不需要在边栏中手动列出所有字符。 我建议创建一个包含您的字符列表的文件，并在边栏和内容中使用它。 这样，您将减少代码并在一个文件中维护字符列表（以及所有所属信息，例如id）。