Question

我要做的是删除下面的重复代码。

import icon1 from './images/abc.png'
import icon2 from './images/xyz.png'
import icon3 from './images/pqr.png'
import icon4 from './images/stu.png'
...

<img src={icon1}/>
<img src={icon2}/>
<img src={icon3}/>
<img src={icon4}/>
...

我想在概念上使用循环或地图功能重写上面的代码。

let array = [1,2,3,4];

{array.map( v =>
  <img src={icon + v} />
);}

当然，它不起作用。在使用React.js时，如何使用字符串连接来使用变量？

Answer 1

不确定最佳解决方案，但这个解决方案可行。

不是将1,2,3,4存储在数组中，而是存储如下图像名称：

let imgArr = ['abc', 'xyz', 'stu'];

使用require时：

{
    imgArr.map(v =>
        <img src={require(`./images/${v}.png`)} />
    );
}

注意：如果您使用此图片，则无需导入顶部的所有图片。

Answer 2

创建变量：

let ICONS = {
    1: icon1,
    2: icon2,
    3: icon3,
    4: icon4
}

然后访问其字段

{array.map( v =>
    <img src={ICONS[v]} />
);}

Answer 3

你当然可以做到

create procedure dbo._sp_checkId
(
    @value dbo.type_first readonly
)
as
BEGIN
delete
from @value
where Id in
(
    select Id
    from dbo.tbl_first
)
GO
SELECT @value
END

如何在React.js中使用字符串数组来使用变量名

3 个答案: