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