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アドオンの createFragment（オブジェクト）を使用してオブジェクトをラップします。 '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; 

は、これが動作するかどうか、私に教えてください！