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

问题描述

代码沙盒链接。

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

加载后，您会看到左侧的角色，右侧是介绍屏幕。
例如，当用户单击第一个字符（Cloud）时，介绍屏幕将替换为 Cloud 的统计信息。如果用户点击第二个、第三个等字符，同样的事情。右侧的介绍屏幕被替换为该角色的特定统计数据。

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

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

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

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

单击左侧的字符时，隐藏右侧的任何内容并将其替换为该字符的信息。

标签： javascriptarraysreactjsobject

我让你的意图在这里工作：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 函数发送给它的孩子 CardOverview，并带有相关的 id(*)：

<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）。

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

问题描述

解决方案

推荐阅读