Question

Codesandbox link.

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

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

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

有关/ 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等所有归属信息）。

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

1 个答案: