使用 JSX 为数组中的每个元素创建一个新的 div 元素？

Question

我正在尝试使用reactjs JSX为数组中的每个元素创建一个div元素。我不知道如何真正去做这件事，但我尝试这样做：

{results.forEach(element => {
               <div className={classes.SearchResults}>

                {results[element]}    

                </div>

})}

这不起作用，但我相当有信心它是沿着这些思路的。我没有收到任何错误结果是我在其他地方定义的数组元素，并且完全正常工作。唯一的问题是为结果数组中的每个元素显示一个新的 div 元素。 如果您需要更多代码，我很乐意为您提供，尽管我认为这应该是足够的数量。

Answer 1

关闭。

首先，您想要

.map()

，而不是

.forEach()

。 后者只是迭代但不返回任何内容，而前者返回一个新数组（与原始大小相同）“映射”到新元素结构（在本例中为 JSX 元素）。

---

除此之外...这里使用花括号

{}

创建了一个函数体，在本例中由一个 JSX 元素组成，但不返回任何内容：

{
  <div className={classes.SearchResults}>
    {results[element]}    
  </div>
}

您可以显式返回元素：

{
  return (<div className={classes.SearchResults}>
    {results[element]}    
  </div>);
}

或者通过在箭头函数周围使用括号

()

来使用箭头函数的隐式返回，使整个函数只是一个语句（而不是显式函数体）：

(
  <div className={classes.SearchResults}>
    {results[element]}    
  </div>
)

---

另外...

results[element]

的使用在这里看起来是错误的。

.map()

的第一个回调参数不是 index，而是元素本身。 我怀疑你想要这个：

(
  <div className={classes.SearchResults}>
    {element}    
  </div>
)

---

最后一点，在 React 中，如果您迭代这样的数组来生成 JSX，但不向 JSX 元素提供

key

属性，您将看到警告。 如果

element

对象具有标识符，例如

id

属性，您可以使用它：

(
  <div key={element.id} className={classes.SearchResults}>
    {element}    
  </div>
)

但是如果做不到这一点，您始终可以依赖

.map()

回调的第二个参数，其中 is 只是数组元素的索引：

{results.map((element, i) => (
  <div key={i} className={classes.SearchResults}>
    {element}    
  </div>
))}

Answer 2

你已经很接近了，但是你在这里使用了错误的数组方法。

Array.map()

返回一个新数组，您可以使用它返回

divs

数组来渲染

results

数组中的每个项目。

有关更多详细信息，请查看此处：https://reactjs.org/docs/lists-and-keys.html

Answer 3

forEach

只是运行回调而忽略返回值

map

用于转换并为每次迭代返回一个新值，因此您可以使用以下内容：

{results.map((element, index) => {
   return (
      <div className={classes.SearchResults} key={index}>
          {results[element]}    
      </div>
   )
})}

Answer 4

另一个小例子...这显示了一个

<div>

，其中包含我数组中每个 Excel 工作表的一个子

<div>

。

我还有一个基于 0 的“

selectedWorksheetInx

”值，用于跟踪已选择的选项卡。

<div className="excelWorksheetsWrapper">
    { worksheets?.map(sheet => (
        <div className={ index == selectedWorksheetInx ? "selectedTab" : "" }>
            {sheet.worksheetName}    
        </div>
    ))}
</div>