将对象渲染到React组件

Question

我认为这将是一个简单的任务，但我一直在这一整天都在努力，但仍然无法解决这个问题。

我收到一个非常大的（多层对象）JSON文件，我存储在我的组件状态，现在我需要在屏幕上呈现该数据。这变得很困难，因为在对象中我有几个其他对象也可能包含其他对象。

到目前为止，我使用Object.keys(myJSONObject).map(...)试图完成它，但我似乎无法找到一种方法来达到所有'子对象'。这里是我当前的代码：

render: function(){ 
     return (

     <div> 

      { 
       Object.keys(_this.state.content).map(function (key) { 
        if (typeof _this.state.content[key] instanceof Object){ 
        //go through all objects and sub-objects??? 

         } 
        return <div > Key: { 
         key 
        }, Value: { 
           _this.state.content[key] 

        } </div>; 
       }) 
      } 


     </div> 
    ); 
    } 

编辑：我也许应该补充一点，我的目标是_this.state.content

编辑2：这里是我期待遍历对象的一个​​例子。请记住，这比它大很多。

{ "3.8": [ "Something something" ], 
"3.2": [ { "Blabla": [ "More things I am saying", "Blablablabal", "Whatever" ] } ], 
"2.9": [ { "Foo": [ "bar", "something something something something", "blablablabalbalbal" ] } ]} 

编辑3：这是我怎么会有点像它呈现的时候看：

3.8: 
- Something something 
3.2: 
- Blabla: 
    - More things I am saying 
    - Blablablabal 
    - Whatever 
2.9: 
-Foo: 
    -bar 
    ... 

Answer 1

这是你所追求的：http://codepen.io/PiotrBerebecki/pen/PGjVxW

该解决方案依赖于使用作出反应的可重用组件。它根据您的示例接受不同级别嵌套的对象。您可以进一步调整以适应更多类型的对象。

const stateObject = { 
    "3.8": [ "Something something" ], 
    "3.2": [ { "Blabla": [ "More things I am saying", "Blablablabal", "Whatever" ] } ], 
    "2.9": [ { "Foo": [ "bar", "something something something something", "blablablabalbalbal" ] } ] 
} 


class App extends React.Component { 
    render() { 
    const renderMainKeys = Object.keys(stateObject) 
     .map(mainKey => <MainKey mainKey={mainKey} 
         innerObject={stateObject[mainKey]} />); 

    return (
     <div> 
     {renderMainKeys} 
     </div> 
    ); 
    } 
} 


class MainKey extends React.Component { 
    render() { 
    if (typeof this.props.innerObject[0] === 'string') { 
     return (
     <div> 
      <h4>{this.props.mainKey}</h4> 
      <ul> 
      <li>{this.props.innerObject[0]}</li> 
      </ul> 
     </div> 
    ); 
    } 

    const innerObjectKey = Object.keys(this.props.innerObject[0])[0]; 
    const innerList = this.props.innerObject[0][innerObjectKey]; 

    return (
     <div key={this.props.mainKey}> 
     <h4>{this.props.mainKey}</h4> 
     <InnerKey innerObjectKey={innerObjectKey} innerList={innerList}/> 
     </div> 
    ) 
    } 
} 

class InnerKey extends React.Component { 
    render() { 
    return (
     <ul> 
     <li>{this.props.innerObjectKey}</li> 
     <InnerList innerList={this.props.innerList} /> 
     </ul> 
    ) 
    } 
} 


class InnerList extends React.Component { 
    render() { 
    if (!Array.isArray(this.props.innerList)) { 
     return (
     <ul> 
      <li>{this.props.innerList}</li> 
     </ul> 
    ); 
    } 

    const listItems = this.props.innerList.map(function(item, index) { 
     return <li key={index}>{item}</li>; 
    }); 

    return (
     <ul> 
     {listItems} 
     </ul> 
    ); 
    } 
} 


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
); 

Answer 2

这里是我写的某个时候返回手在我的JSON文件嵌套3层的代码。

JSON

var a = { 
    "parent":{ 
     "name":"x", 
     "child":{ 
      "name":"y", 
      "subchild":{ 
       "name":"check" 
      } 
     } 
    } 
} 

迭代

Object.keys(obj).map(function(key,index){ 
    let section = obj[key] 
    //getting subsections for a single section 
    let subSections = section["subsections"] // get you nested object here 
    Object.keys(subSections).map(function(subSectionId,key){ 
     //getting a single sub section 
     let subSection=subSections[subSectionId] 
     //getting instruments for a sub section 
     let nestedSection = subSection["//key"] //get you next nested object here 

     Object.keys(instruments).map(function(instrumentId,key){ 
        //operation 
       } 
      }) 
     }) 
    }) 
    }) 

希望它能帮助。