React JS - 如何显示数组中的对象？

Question

我是 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;

Answer 1

我假设您希望您的冠军信息可见。

（因为 '<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>
  );
}

Answer 2

你快到了，你只是缺少一些括号和结束标签。

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;

Answer 3

在您的代码中，您将属性赋予它无法识别的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 组件。 抱歉英语不好，但我希望它能清除你的概念。