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

【问题标题】：Loop and render an object in React.js在 React.js 中循环并渲染一个对象
【发布时间】：2016-07-18 19:05:12
【问题描述】：

我正在尝试在元素内渲染一个对象（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： 对象作为 React 子对象无效（找到：带有键 {self} 的对象）。如果你打算渲染一个集合的孩子，使用数组代替或包装对象使用来自 React 附加组件的 createFragment(object)。检查渲染方法 'NetworkDetail'。

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

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

它有效。

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

【问题讨论】：

您确定props.dataDetails 中的所有键都不能解析this.props.dataDetail[detail] 中的对象吗？
哦，span，dataDetail 对象实际上有一个名为 _links 的属性，它是一个对象...（应用程序使用 REST HATEOAS 后端）。如果这个_linksobject 是原因，我应该如何摆脱？也许使用 underscore.js（我实际上已经使用 underscore.js 重新格式化我的数据）？
你可以使用Underscore的omit函数来过滤_links。一个更好的选择可能是创建一个您想要渲染的键的列表，并改用 Underscore 的 pick 函数。见：underscorejs.org/#omit
感谢您的帮助。我接受了下面的答案，但您完全解决了最初的问题（我的对象内的对象）。再次感谢。

标签： javascript reactjs react-jsx

【解决方案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;

让我知道这是否有效！

【讨论】：

很高兴它为你解决了@Clafou。如果您遇到任何其他问题，请告诉我 =)