react中使用{}进行渲染时对象深度遍历问题

Question

求助大佬，我有这种需求，数据结构是{国家：{省：{市：县}}}这种嵌套的，我想遍历展示出来，但是不知道语法怎么写，下图这种写法报错。我知道一种解决方式是将每个级别抽出一个组件，但是如果这里我只能有jsx的{}来渲染，我想请问一下正确的语法应该怎么写？

Answer 1

return可以返回的类型有：string, array, function/class, null。
你在遍历里面一个return返回多个标签是会报错的。可以这么改：

return [
  <label key={province.name}>{province.name}</label>,
  {
    province.cities.map()
  }
];

cities中的return也可以利用数组形式返回。

如果你不用数组，那么就得在外层加一个标签了：

return (
  <div key={province.name}>
   <label>{province.name}</label>
   {
     province.cities.map()
   }
  </div>
);

Answer 2

报错是因为返回值有问题，jsx 每次return必须是一个节点，不能是多个。

...
return(
    <div>
        <label> .... </label>
        {}
    <div>
)
...

而你的return，label是一个节点， {} 也是一个节点，所以报错了

Answer 3

return只能返回一个节点，可以吧返回的两个节点包一下，比如：

<div>
    <label>{province.name}</label>
    {...}
</div>

另外，map直接返回一个值，没有其他操作的时候可以直接使用（）代替{ return ... },比如

arr.map(item => (
    <div> 

        <label>{province.name}</label>
        {...}
    </div>
))

看起来会清晰一些