L oop Через массив изображений для создания таблицы React

Question

Я пытаюсь сгенерировать таблицу футбольных очков в 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>
)

}


}

Есть ли способ создать таблицу путем циклического перемещения по массиву изображений? Я хотел бы добавить больше изображений в массив, если это возможно.

Answer 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>
    );
  }
}

Answer 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>

Также, если это не работает, попробуйте установить sr c из img вот так:

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