Question

我想遍历道具屏幕截图，但它对我不起作用！我曾经在其他组件中做到这一点，但它一直在起作用。我失去理智了：（

请在我的代码下面找到：

              {screenshots && <h2>Hello</h2>}

这有效并且完美呈现。

但是当我像

那样循环时

{screenshots && screenshots.length && screenshots.map(screenshot => {
    <div className="container img--container" key={screenshot.id}>
        <SVG
        className="icon remove--icon"
        src={removeCircle}
        />
       <img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
    </div>
})}

循环内的内容无法渲染！并且控制台没有显示任何错误。

请帮忙吗？

Answer 1

缺少回报！！您可以使用“（）”立即返回。

{screenshots && screenshots.length && screenshots.map(screenshot => (
    <div className="container img--container" key={screenshot.id}>
        <SVG
        className="icon remove--icon"
        src={removeCircle}
        />
       <img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
    </div>
))}

Answer 2

使用map时，必须注意放在=>之后的内容。如果必须在映射时处理数组的元素，请执行以下操作：

array.map(a => { 
  // Javascript here
  return(
    <div>JSX here!</div>
  );
});

如果只需要渲染JSX，请执行以下操作：

array.map(a => (
    <div>JSX here!</div>
));

由于=> ()隐式返回()之间的内容。

Answer 3

在箭头功能中，圆括号用于闭包。这样它将包装您的函数。

如果您使用带有尖括号的箭头功能，则必须使用return。像这样：

screenshots.map(screenshot => {
    console.log('I can do whatever I like here...');
    return 'but I have to return something!'
});

箭头功能不带花括号会自动返回您的语句，并且只能仅使用一条语句。

screenshots.map(screenshot => 
   'It returns this string without using word `return`!'
);

您的代码应如下所示（带有花括号和返回）：

{screenshots && screenshots.length && screenshots.map(screenshot => {
    console.log('Wow! I am in arrow function! I have to return something.');
    return 
        <div className="container img--container" key={screenshot.id}>
           <SVG className="icon remove--icon" src={removeCircle}/>
           <img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
        </div>
})}

或者您也可以像这样删除大括号：

{screenshots && screenshots.length && screenshots.map(screenshot =>
    <div className="container img--container" key={screenshot.id}>
        <SVG className="icon remove--icon" src={removeCircle}/>
       <img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
    </div>
)}

您可以了解有关arrow functions at w3schools的更多信息。

反应.map不呈现

3 个答案: