ReactJS-如何顯示陣列中的物件？

我是 JS 和 React 的新手，所以我有一個簡單的問題：我有一個包含物件的陣列。如何顯示/渲染所有這些物件及其屬性？稍后我需要它用于串列/卡片。“地圖”也許？預先感謝您對我們的支持！

import React from 'react';
import logo from './logo.svg';
import './App.css';

const champions = [
  {
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];

function App() {
  return (
    <div>
{champions.map((champions) => (
      <div
        name={champions.champName}
        sport={champions.sport}
        games={champions.games}
      />
    </div>
  );
}

export default App;

uj5u.com熱心網友回復：

你快到了，你只是缺少一些括號和結束標簽。

import React from 'react';
import logo from './logo.svg';
import './App.css';

const champions = [
  {
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];
    
function App() {
  return (
    <div>
      {champions.map((champions) => (
        <div>
          name={champions.champName}
          sport={champions.sport}
          games={champions.games}
        </div>
      ))}
    </div>
  );
}

export default App;

uj5u.com熱心網友回復：

我假設您希望您的冠軍資訊可見。

（因為 '<div name={champion.name}>' 不會呈現任何對螢屏可見的東西......只需將具有該值的屬性添加到您的 div）

你可以做這樣的事情。

import React from 'react';
import logo from './logo.svg';
import './App.css';

const champions = [
  {
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];

// Create this component to render a single champion
function Champion({champion}) {
   return (
      <div>
          <div>Name: {champion.champName}</div>
          <div>Sport: {champion.sport}</div>
          <div>Games: {champion.games}</div>
      </div>
   )
}

function App() {
  return (
    <div>
      {
       champions.map((champion) => <Champion champion={champion} />)
      }
    </div>
  );
}

export default App;

回顧：

• 創建一個組件函式來渲染一個英雄
• 在 .map() 中使用該組件
• 將冠軍傳給你的新組件

編輯

創建一個組件是完全可選的，但是在你的情況下有一個組件可以用來分離關注點......

你可以在你的模板中做到這一點......

以下示例具有完全相同的結果（我在此處僅包含 App 函式作為一個簡單的帖子）

function App() {
  return (
    <div>
      {
       /* We can do it right here as well, without a dedicated 
        component */
       champions.map((champion) => (
      <div>
          <div>Name: {champion.champName}</div>
          <div>Sport: {champion.sport}</div>
          <div>Games: {champion.games}</div>
      </div>
   ))
      }
    </div>
  );
}

uj5u.com熱心網友回復：

在您的代碼中，您正在為其div無法識別的屬性提供屬性。您可以檢查 W3 學校哪些屬性是可以接受的div。順便說一句，這完全是一個不同的話題，我建議你也去研究一下。對于您當前的代碼，您可以更改您的代碼，例如：-

import React from 'react';
import logo from './logo.svg';
import './App.css';

const champions = [
  {
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];

function App() {
  return (
    <div>
     {champions.map((champion) => (
        <div>{champion.champName}</div>
        <div>{champion.sport}</div>
        <div>{champion.games}</div>
       );
     }
    </div>
   )
}

export default App;

如果你真的想像屬性一樣傳遞它（我們在 React 中稱之為 props），你需要創建一個新組件，你的代碼可以是這樣的：

function Champion({name, sport, game}) {
return (
     <>
       <div>{name}</div>
       <div>{sport}</div>
       <div>{game}</div>
    </>
  )
}


function App() {
 return (
   <div>
      {champions.map((champion) => (
         <Champion 
           name={champion.champName}
           sport={champion.sport}
           game={champion.game}
          />
        );
      }
   </div>
  )
}

另請注意，在 React 中，HTML 標簽的屬性與“常規”相同。我們只能將 props 傳遞給我們的自定義 React 組件。抱歉英語不好，但我希望它能清除你的概念。

標籤：javascript 反应 数组

上一篇：如何在Javascript中從Json創建搜索過濾器

下一篇：使用腳本洗掉$登錄表格