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

Question

我正在尝试在一个元素（ 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”的渲染方法。

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

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;

让我知道这个是否奏效！