gpt4 book ai didi

javascript - 循环图像数组以生成表 React

转载 作者:行者123 更新时间:2023-12-02 21:03:03 25 4
gpt4 key购买 nike

我正在尝试从一组图像在 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)是这样创建的:

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

}


}

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

最佳答案

使用map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

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

关于javascript - 循环图像数组以生成表 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61290868/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com