Javascript React：递归地呈现嵌套元素

我为代码格式提前道歉。 我有这样一个数据源：

var data = {
key1: 'value',
key2: 123,
key3: {
 key30: 'value',
 key31: {
  key310: 123,
  key311: 'hello'
 }
}
}

使用React，我尝试将其转换为如下所示的

：

<ul id="data">
<li>key1: value</li>
<li>key2: 123</li>
<li>key3: [Object]
 <ul>
  <li>key30: value</li>
  <li>key31: [Object]
   <ul><li>key310: 123</li>
   <li>key311: hello</li>
   </ul>
  </li>
 </ul>
</li>
</ul>

关键1：价值
关键字2:123
键3:[对象]

键30：值
键31:[对象]
按键310:123
键盘311：你好

到目前为止，我已经尝试：

    React.createClass({
    getInitialState: function() {
     return {lists: [{
      key1: 'value',
      key2: 123,
      key3: {
       key30: 'value',
       key31: {
        key310: 123,
        key311: 'hello'
       }
    }
    }]}
    },
    generateFirst: function(parent, data, tempContainer) {
    var li
    var liHead
    var wrap
    var key
    for (key in data) {
      if (this.getType(data[key]) === 'object') {
        // li head
        liHead = React.DOM.li({
          className: 'token-head'
        }, key + ':' + data[key])

        // line
        li = React.DOM.li({
          className: 'iop'
        }, React.DOM.ul({
          className: 'iok'
        }, this.generateFirst(data[key])))

        // wrap
        wrap = React.DOM.ul({
          className: 'wrap-ul'
        }, li)

        tempContainer.push(liHead)
        tempContainer.push(wrap)
      } else {
        li = React.DOM.li({
          className: 'iol'
        }, key + ':' + data[key])
        tempContainer.push(li)
      }
    }
  },
  renderTokenContent: function(data) {
    var tempContainer = []
    this.generateFirst(data, tempContainer)
    return (<ul>{tempContainer}</ul>)
  },
  render: function() {
    var self = this
    return (<ul className="scroll-helper">
                  { this.state.lists.map(function(data) {
                      return (<li >
                                { self.renderTokenContent(data) }
                              </li>)
                    }) }
                </ul>)
  }
})

React.createClass({
getInitialState:函数（）{
返回{列表：[{
键1:'值'，
键2:123，
关键3：{
键30:'值'，
关键31：{
按键310:123，
311键：“你好”
}
}
}]}
},
generateFirst：函数（父级、数据、临时容器）{
李华
里赫德变种
变量包装
变量键
用于（输入数据）{
if（this.getType（data[key]）=='object'）{
//李海德
liHead=React.DOM.li({
类名：“令牌头”
}，键+'：'+数据[键]）
//线
li=React.DOM.li({
类名：“iop”
}，React.DOM.ul({
类名：“看”
}，this.generateFirst（数据[key]））
//包裹
wrap=React.DOM.ul({
类名：'wrap ul'
}，李）
临时容器推压（liHead）
临时容器。推（包）
}否则{
li=React.DOM.li({
类名：“iol”
}，键+'：'+数据[键]）
临时容器推送（li）
}
}
},
renderTokenContent:函数（数据）{
var tempContainer=[]
this.generateFirst（数据，临时容器）
返回（
{tempContainer}
）
},
render:function（）{
var self=这个
返回（

{this.state.lists.map（函数（数据））{
返回（

{self.renderTokenContent（数据）}
）
}) }
）
}
})

---

它解析整个树，但不在正确的容器中呈现元素

下面是React.14.Common/TreeView中的嵌套树示例。请注意，在这种情况下，嵌套属性是子属性

从“React”导入React；
从“lodash/object/get”导入lodashGet；
设TreeRootSty={lineHeight:'120%'}
让liSty={listStyleType:'none'}；
让ulSty={height:'inherit'，WebkitPaddingStart:'16px'}；
让ulStyle={height:'inherit'，WebkitPaddingStart:'16px'}；
设iconSty={marginRight:'10px'，width:'16px'}；
让NotToggable={
颜色：“#FFF”，
光标：“指针”，
边距：“0.8em”
};
让可切换={
颜色：“#815C7C”，
光标：“指针”，
边距：“0”
};
让选项={}；
让getTreeNode=函数（子级，索引）{
return
；
};
类JTreeViewNode扩展了React.Component{
构造函数（props）{super（）；}
iconHandler=（）=>{
if（this.props.node.children&&this.props.node.children.length>0）{
this.props.iconClick（this.props.node）；
}否则{
这是clickHandler（）；
}
};
clickHandler=（）=>{this.props.titleClick（this.props.node）；}；
render（）{
设titleSty={color:'#afac87'，marginTop:'2px'}；
让子节点；
设pSty=不可切换；
if（this.props.node.children&&this.props.node.children.length>0）{
childNodes=this.props.node.children.map（getTreeNode，this）；
titleSty.color=this.props.node.selected？#7BB53B'：#AF90A5'；
}否则{
titleSty.color=this.props.node.selected？“#b58900”：“#afac87”；
}
让isClosed=true；
如果（this.props.node.closed！=null）isClosed=this.props.node.closed；
让分支=(

{childNodes}

)
如果（isClosed）分支=null；
让props=this.props；
让iconType=lodashGet（props，options.typeName）；
if（iconType==options.icon.sun）iconSty.background=“url（'./img/sun.ico'）0/16px不重复！重要”；
else if（iconType==options.icon.leaf）iconSty.background=“url（'./img/leaf.ico'）0/16px不重复！重要”；
else if（iconType==options.icon.snow）iconSty.background=“url（'./img/snow.ico'）0/16px不重复！重要”；
else iconSty.background=“url（'./img/sun.ico'）0/16px不重复！重要”；
返回(
{this.props.node.title}
{branch}
);
}
}
导出默认类JTreeView扩展React.Component{
render（）{
选项=this.props.options；
让childNodes=this.props.data.map（getTreeNode，this）；
返回(

{childNodes}

);
}
}

我遇到了类似的问题，这里有一个解决方案；希望能有帮助

const dummyData=Immutable.fromJS(
{Id:10203040，
伯迪斯：“这个词”，
包含：{
用户ID:219038012，
名字：“约翰”，
姓：“史密斯”，
用户名：“JSmith”，
密码：“通行证”，
字符串：{1:“红色钓鱼”，蓝色：“蓝色钓鱼”}
},
电话：1337，
清单：{
答:1,，
b:2，
c:3
},
关闭：“关闭”
})
类NestedListDisplay扩展React.Component{
深度显示（项目）{
var newItems=[]
用于（让项目[键，输入]）{
newItems[newItems.length]=（此.checker（条目，键））
}
返回新项目
}
检查人（如输入）{
开关（输入类型）{
案例“对象”：
return
{this.deepDisplay（entry）}
个案"名单":
return
{this.deepDisplay（entry）}
案件编号：
return
{entry}
大小写“string”：
return
{entry}