javascript - 将对象渲染到 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

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

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')
);