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>
}

Answer 2

返回元素时，需要将其括在圆括号（）中，而我通常使用map而不是forEach。

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

如果功能不需要任何逻辑，我相信您也可以忽略花括号。

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

-编辑-

现在，我正在阅读您的问题，一种更简洁的方法来解决这个问题，那就是在类外部声明组件函数，例如

class Grid extends react.Component {
   render(){
      return (
         <Box>
            <CreateCard props={ item }/>
         </Box
      )
   }
}

const CreateCard = props => (
    <Box>
        {props.items.map(item => {
            return ( <div>{item.name}</div> )
        })}
    </Box>
)

反应嵌套渲染

2 个答案: