オブジェクトからの複数のコンポーネント

Question

私はreactjsに非常に新しく、私は把握できないような問題があります。 私はまだ概念を完全に理解していない可能性がありますが、よく、ここに行く： ああ、私は物事のいくつかが最良の方法ではないことを知っていますが、私は反応し、JavaScript（私は、私はインターンシップのためにやっています）。

私はFacebook react tutorialの変更を行っています。私が今持っているのは、2dオブジェクトの配列です。これは.map（）によって処理されます。もう一つは、このようになります

{ 
    "id": 1, 
    "name": "Exercise", 
    "timeStamp": "2016-03-22T10:08:20.3105358+00:00", 
    "data": {"name": "Back training", "video": "v=yoimdckms"} 
} 

：

{ 
    "id": 1, 
    "name": "appointment", 
    "data": {"appointmentsubject": "have dinner", "label": "green"} 
} 

---

だから私の問題はこれです：ちょうどcomponent.nameとcomponent.timeStampを選ぶとき、それ 一つの目的は、次のようになりますうーん。

var ComponentList = React.createClass({ //this works 
    render: function() { 
    var componentNodes = this.props.data.map(function(component, index) { 
     return (
     <Component name={component.name} timeStamp={component.timestamp} key={index} > 
     </Component> 
    ); 
    }); 
    return (
     <div className="componentList"> 
     {componentNodes} 
     </div> 
    ); 
    } 
}); 

しかし、私はデータオブジェクトに入るとき、それは明らかに失敗し、いないすべてのオブジェクトがappointmentSubject性質を持っており、他の人が何のビデオプロパティを持っていないと、未定義のうち、値を取得することはできませんので。

<Component //this doesn't work 
    name={component.name} 
    timeStamp={component.timeStamp} 
    video={component.data.video} 
    key={index}> 
</Component> 

私の質問は、ここでどうやって行くのですか。 私の解決策は、（私はまだコードで働いていないこと）です：

• 名あたりの部品を作る：ExerciseComponent、予定など（これは後のコンポーネントのソートを必要とする、タイムスタンプで、これは前に今起こりますコンポーネントは状態にロードされます）。
• コンポーネントを作成します。コンポーネントには、名前とタイムスタンプのようなフィールドがあり、名前に応じてプロパティを挿入します。

私が本当に知りたいのは、私が実行可能だと思った解決策はありますか？それとも、私を助けてくれるもう一つの解決策がありますか？

ああ、私はフラックスやレフィックスなどを使用していません。私は可能な限り最小限にしようとしています。なぜなら、非常に混乱する傾向があるからです。

Answer 1

var componentNodes = this.props.data.map(function(component, index) { 
     component.name && component.timeStamp && component.data.video? 
     return (
    <Component //this doesn't work 
     name={component.name} 
     timeStamp={component.timeStamp} 
     video={component.data.video} 
     key={index}> 
     </Component> 
    ):null 
    }); 

Answer 2

一つの方法は、Componentに全体componentを通過した後、そこに評価することです。だから、：あなたのComponent内部次に

var ComponentList = React.createClass({ //this works 
    render: function() { 
    var componentNodes = this.props.data.map(function(component, index) { 
     return (
     <Component componentData={component}> 
     </Component> 
    ); 
    }); 
    return (
     <div className="componentList"> 
     {componentNodes} 
     </div> 
    ); 
    } 
}); 

は、あなたがオブジェクトを評価し、存在しないすべてのプロパティのデフォルトの小道具を提供することができます。このように、渡すオブジェクトにすべての小道具がない場合、Reactはデフォルトの小道具を提供します。たとえば、次のようにまたあなたのmap機能（オブジェクトの元の配列をループされたもの）にロジックのこの種を追加することが可能であることを

const Component = React.createClass({ 
    getDefaultProps(
     return : { 
      component: { 
       name: 'N/A', 
       timestamp: 'N/A', 
       data : {} 
      } 
     } 
    ), 

    render() { 
     return { 
      <div>{this.props.component.name}</div> 
      <div>{this.props.component.timestamp}</div> 
      <div>{this.props.component.data.video}</div> 
     }; 

    } 
}) 

も注意してください。マップの各反復では、あなたも同じように、正規化されたオブジェクトを構築することができます：

jsonArray.map((obj) => { 
    return { 
     name: obj.name || 'N/A', 
     timestamp: obj.timestamp || 'N/A', 
     data: { 
      video: obj.data.video || 'N/A 
     } 
    }; 
});