javascript - 在 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

但这行不通。抛出的错误是

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {self}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of 'NetworkDetail'.

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

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

它有效。

如何呈现对象的所有属性和值？

Answer 1

在我看来，这个组件是一个无状态/dumb组件。因此，您应该首先阅读有关如何编写此类组件以最大限度地提高效率的信息: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;

让我知道这是否有效!