循环遍历图像数组以生成表 React答案

【问题标题】：Loop Through Array Of Images To Generate Table React循环遍历图像数组以生成表 React
【发布时间】：2020-04-18 14:34:40
【问题描述】：

我正在尝试根据一组图像在 React 中生成足球积分表。例如这是我的数组：

import arsenal from './images/Arsenal.png';
import bournemouth from './images/AFCBournemouth.png';
import villa from './images/AstonVilla.png';

const icons =[{arsenal},{bournemouth},{villa}];

目前我的班级是这样创建的：

class Standings extends React.Component{

render(){

return(
<Table striped bordered hover size="sm">
  <thead>
          <tr>
            <th>Teams</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <img src={bournemouth} class="icon" height="42" width="42" />
            </td>
            <td>0</td>
          </tr>
          <tr>
            <td>
              <img src={arsenal} class="icon" height="42" width="42" />
            </td>
            <td>0</td>
          </tr>
          <tr>
            <td>
              <img src={villa} class="icon" height="42" width="42" />
            </td>
            <td>3</td>
          </tr>
        </tbody>
</Table>
)

}


}

有没有办法通过循环遍历图像数组来生成表格？如果可能的话，我想向数组中添加更多图像。

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

使用map()

map() 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的函数的结果。

const icons =[arsenal, bournemouth, villa];

class Standings extends React.Component {
  render() {
    return (
      <Table striped bordered hover size="sm">
        <thead>
          <tr>
            <th>Teams</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
          {icons.map((url, idx) => (
            <tr>
              <td>
                <img src={url} class="icon" height="42" width="42" />
              </td>
              <td>{idx}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    );
  }
}

【讨论】：

您好，地图工作，但图像在表格中没有处理...
@clattenburgcake 使用const icons =[arsenal, bournemouth, villa];
道歉。没有看到这种变化！

【解决方案2】：

您可以与团队一起创建对象数组：

const teams = [
    {
       url: 'url',
       name: 'Arsenal,
       points: 3
    }
]

然后迭代它：

<Table striped bordered hover size="sm">
 <thead>
          <tr>
            <th>Teams</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
{
    teams.map((team) => (
        <tr>
            <td>
                <img src={team.url} class="icon" height="42" width="42" />
            </td>
            <td>{ team.points }</td>
        </tr>
}
        </tbody>
</Table>

另外，如果这不起作用，请尝试像这样设置 img 的 src：

<img src={{uri: team.url}} />

【讨论】：