react render的问题

Question

父组件：

这样写要报错，难道render函数里面 紧接着必须要写div容器么？

错误信息：就是

补充：其实我可以把《main》标签放在List中，就可以了，但是这样感觉不合理，还是我自己没规划好组件？

Answer 1

谢邀~
首先没有粘出错误信息, 所以只能猜了.

只能 return一个容器;
也就是顶部只能有一个父容器.
map出来的显然是多个容器.
所以:

return(
    <div>
        {list.map(function(){...})}
    </div>
)

试一下~

Answer 2

如果你不想像楼上那样多添加一个div的话，就只能把main移到List组件中了...

return (
  <main>
    { lists.map(()=>{...})}
  </main>
)

Answer 3

你必须要剥一层，不然等于什么也没有

render（
    <div>
        //做你的循环渲染
    </div>
）