Nesnenin birden çok bileşeni

Question

Çok fazla tepki göstermekte ve çözemediğim bir sorunla karşılaşıyorum. Bu kavramı henüz tam olarak anlamadığım olabilir, ama işte burada: Oh ve bazı şeylerin en iyi yol olmadığını biliyorum, ama tepki vermek ve javascript için yeniyim (ki ben ' staj yapmak için m).

Facebook react tutorial'dan bir değişiklik ile çalışıyorum. Şu an sahip olduğum şey: 2d nesnesinin bir dizisi. Bu, .map() ile çalışır.

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

diğeri şu şekilde görünecektir:

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

---

Bu kadar sorun şudur: sadece component.name ve component.timeStamp almak, bunun bir nesne şuna benzer iyi.

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> 
    ); 
    } 
}); 

Ama veri nesnesine alınca tüm nesneleri bir appointmentSubject özelliği vardır ve diğerleri hiçbir görüntü özelliği vardır ve tanımsız bir çıkış değeri elde edilemediğinden, belli ki, başarısız olur.

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

Benim sorum şu, burada nasıl giderim. (Henüz kodunda çalıştı olanlar) Benim çözümler şunlardır:, zaman damgası ile, bu daha önce şimdi ne olacak sonra ExerciseComponent, Atama vb (bu bileşenlerin sıralamayı gerektirecektir:

• bir isim başına bileşen yapın Bileşenler, duruma yüklenir.)
• Bileşen, tüm bileşenlerin adı ve zaman damgası gibi olduğu alanları ve isme bağlı olarak, özellikleri ekleyin.

Gerçekten bilmek istediklerim: yaşayabileceğimi düşündüğüm çözümler. Yoksa bana daha iyi yardımcı olacak başka bir çözüm var mı?

Oh ve ben flux veya redux veya herhangi bir şey kullanmıyorum, çünkü atm olabildiğince minimal olmaya çalışıyorum çünkü çok hızlı kafa karıştırmaya eğilimlidir.

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

Tek yön Component için tüm component geçmek ve daha sonra orada değerlendirmektir. Yani: sizin Component içindeki Sonra

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> 
    ); 
    } 
}); 

, nesneyi değerlendirmek ve var olmayan herhangi bir özellik için varsayılan sahne sağlayabilir. Bu şekilde, içinde geçirdiğiniz nesnenin tüm parçaları yoksa, React varsayılan sahne sağlayacaktır. Örneğin: Ayrıca o da map fonksiyonunun (nesnelerin orijinal dizinin üzerinde döngü olduğu bir) mantığı bu tür eklemek mümkün olduğunu

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> 
     }; 

    } 
}) 

Not. haritanızın her tekrarında, aynı zamanda böyle bir normalize nesne inşa edebileceğini:

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