在 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

在我看来，这个组件是一个 stateless/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;

让我知道这是否可行！

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

Loop and render an object in React.js

javascript

reactjs

react-jsx