javascript - React 嵌套渲染

Question

我有一个包含多个数组的对象，例如:

const Items = {
Deserts: [{name:cookies}, {name:chocolate}],
Fruits: [{name:apple}, {name:orange}]
...
}

我想将其呈现为:

<title>Deserts</title>
Cookies
Chocolate
<title>Fruits</title>
Apple
Orange

所以我首先渲染类型:

return <Grid>
    {Object.keys(Items).map(type => {
        return <Box key={type}>
            {type} // <== this would be the title, Fruits or whatever
            {this.createCard(Items[type])}
        </Box>
    })}
</Grid>

然后我要添加每个类型的内容:

createCard = (items) => {
  return <Box>
       {items.forEach(item => {
           return <div>{item.name}</div>
       })}
  </Box>
}

不返回内容，如果我只是添加一些预定义的内容而不是 forEach 循环，它工作正常。

Answer 1

forEach 方法仅遍历所有项目但不返回任何内容。相反，您要使用的是 map。 另外，确保在返回值超过一行时将其包装起来:

createCard = (items) => {
  return (<Box>
       {items.map(item => {
           return <div>{item.name}</div>
       })}
  </Box>);
}

如果您不这样做，它就像在第一行之后引入分号一样工作。所以，实际上，您当前的代码相当于:

createCard = (items) => {
  return <Box>;
  // The code below will never be executed!
       {items.forEach(item => {
           return <div>{item.name}</div>
       })}
  </Box>
}