在React.js中循环并渲染一个对象

Question

我正在尝试在元素内部渲染一个对象(Panel元素react-bootstrap).

import React, { PropTypes } from 'react';
import { Panel } from 'react-bootstrap';

const NetworkDetail = React.createClass({
  render () {
    return (
      <Panel header="Network Details" bsStyle="info">
        {this.props.dataDetail && Object.keys(this.props.dataDetail).map(function(detail, id) {
            return <span key={id}>{this.props.dataDetail[detail]}</span>;
        }.bind(this))}
      </Panel>
    )
  }
})

export default NetworkDetail

但这不起作用.抛出的错误是

未捕获的不变违规:对象无效作为React子对象(找到:具有键{self}的对象).如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象.检查'NetworkDetail'的render方法.

我不明白的是,如果我使用

return <span key={id}>{this.props.dataDetail.myProperty}</span>;

有用.

如何渲染对象的所有属性和值？

Answer 1

在我看来,这个组件是一个无状态/哑的组件.因此,您应首先阅读有关如何编写这些组件以最大化效率的信息:https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

然后,要修复您的组件,您应该注意到这一点

    {this.props.dataDetail && Object.keys(this.props.dataDetail).map(function(detail, id) {
        return <span key={id}>{this.props.dataDetail[detail]}</span>;
    }.bind(this))}

只是一个条件陈述.注意你的'&&'.所以,假设这this.props.dataDetail是一个对象,你可以像这样重写这个组件:

import React, { PropTypes } from 'react';
import { Panel } from 'react-bootstrap';

const NetworkDetail = ({dataDetail}) => 
  <Panel header="Network Details" bsStyle="info">
    {
      Object.keys(dataDetail).filter(v => v !== '_links').map((detail, id) => <span key={id}>{dataDetail[detail]}</span>)
    }
  </Panel>

export default NetworkDetail;

让我知道这个是否奏效!