Reactjs 如何使用map（）方法从阵列渲染图像？_Reactjs

Reactjs 如何使用map（）方法从阵列渲染图像？

reactjs

Reactjs 如何使用map（）方法从阵列渲染图像？,reactjs,Reactjs,我正在尝试使用map（）方法渲染存储在数组中的图像。不幸的是，当我试图从数组中渲染图像时，我遇到了错误，但没有使用映射，我可以渲染图像，但我需要逐行编写代码。有人能帮我解决这个问题吗 const CardList = ({robots}) => { const cardComponent = robots.map((user, i) => { return <Card src={robots[i].src} id={robots[i].id} name={robots[

我正在尝试使用

map（）

方法渲染存储在数组中的图像。不幸的是，当我试图从数组中渲染图像时，我遇到了错误，但没有使用映射，我可以渲染图像，但我需要逐行编写代码。有人能帮我解决这个问题吗

const CardList = ({robots}) => {
const cardComponent = robots.map((user, i) => {
    return <Card src={robots[i].src} id={robots[i].id} name={robots[i].name} email={robots[i].email}/>
})
return(
    <div>
    {cardComponent}
    </div>
);

const CardList=（{robots}）=>{
const cardComponent=robots.map（（用户，i）=>{
返回
})
返回(
{cardComponent}
);

我的卡片列表组件

const Card = ({name, email, id, src}) => {

return(
   <div className='bg-light-green dib br3 pa3 ma2 grow bw db w-20'>
         <img className='personal ' alt='robots' src={require(`${src}`)}/>
        <div>
             <h1>{name}</h1>
            <p>{email}</p>
        </div>
    </div>
)

const Card=（{name，email，id，src}）=>{
返回(
{name}
{email}
)

我的卡组件我觉得

src={require（

${src}

）}

这是我从react DOM得到的错误：

yourArray.map（（键，数据）=>{
});

yourArray.map（（键，数据）=>{
});

TLDR；

// All of these works

const fileNameExt = 'foo.jpg'
<img src={require('../images/' + fileNameExt)} />
<img src={require(`../images/${fileNameExt}`)} />

const fileName = 'foo'
<img src={require('../images/' + fileName + '.jpg')} />
<img src={require(`../images/${fileName}.jpg`)} />

// These does not work:

const myPathVariable1 = '../images/' + 'foo' + '.jpg'
<img src={require(myPathVariable1)} />

const myPathVariable2 = '../images/' + 'foo.jpg'
<img src={require(myPathVariable2)} />

方法1：使用变量（无效）：

var myPath = './template/table-row.ejs'
require(myPath)  
// will not work as webpack can't extract anything path or file as myPath is just a variable

var myPath = 'table'
require("./template/" + name + ".ejs")

方法2：使用表达式（可行；涉及一些Web包可以理解的模式）：

var myPath = './template/table-row.ejs'
require(myPath)  
// will not work as webpack can't extract anything path or file as myPath is just a variable

var myPath = 'table'
require("./template/" + name + ".ejs")

Webpack可以从方法2中的表达式解析并生成以下上下文：

Directory: ./template            // webpack understand that there is this directory
Regular expression: /^.*\.ejs$/  // and this regex about the modules

因此，它将加载所有匹配的模块：

./template/table.ejs
./template/table-row.ejs
./template/directory/another.ejs  
// Note that it will load all matching even if we provide --> var myPath = 'table' shown above

因此，每当Web包在

require

中看到一个“表达式”（不是变量）。它加载所有匹配的模块，并生成一个“上下文模块”，其中包含作为上述表达式结果加载的所有模块的信息

所以，您需要提供一个表达式，Web包可以通过加载所有匹配项来理解并生成上下文模块

这意味着支持动态requires，但会导致捆绑包中包含所有匹配的模块。（并且可能会增加捆绑包的大小，因此在使用require中的表达式时需要小心）

回答你的问题：要实现这一目标：

<img className='personal' alt='robots' src={require(`${src}`)}/>