关于vue的render函数使用多层map渲染DOM元素不显示的问题

<div onchange={this.pircechangee}>
                  {this.dectlist.map((item, i) => { // 第一次map
                    return <div class="littitle" domPropsInnerText={item.OptionsName}>
                    <div id={'cleanchild' + i}>
                      {
                        this.radioselect[0]
                        ? <el-radio-group vModel={this.radioselect[i].radio }>
                              {
                                this.radioselect[i].chilLis.map((son, j) => { // 第二次map
                                  return <el-radio label={son.Id}>{son.OptionsName}</el-radio>
                                })
                              }
                          </el-radio-group> : null
                      }
                    </div>
                    </div>
                  })}
                </div>

上面就是一开始写的代码，只能渲染出类名为‘littitle’的标题元素，内部的元素无法被渲染，而且也不报错。

后来查找资料，发现是jsx的写法问题，每段代码块需要被一个外部元素包裹，在map里面却显示不了报错，修改代码如下图

<div onchange={this.pircechangee}>
                  {this.dectlist.map((item, i) => { // 第一次map
                    return <div><div class="littitle" domPropsInnerText={item.OptionsName}></div>
                    <div id={'cleanchild' + i}>
                      {
                        this.radioselect[0]
                        ? <el-radio-group vModel={this.radioselect[i].radio }>
                              {
                                this.radioselect[i].chilLis.map((son, j) => { // 第二次map
                                  return <el-radio label={son.Id}>{son.OptionsName}</el-radio>
                                })
                              }
                          </el-radio-group> : null
                      }
                    </div>
                    </div>
                  })}
                </div>

这样就可以成功渲染了