Несколько компонентов из объекта

Question

Я очень новичок в реагировании и проблема, которую я не могу понять. Возможно, я еще не совсем понял концепцию, но вот здесь: О, и я знаю, что некоторые из вещей не самые лучшие, но я новичок в реакции и 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, назначение и т.д. (это потребует сортировки компонентов позже, метки времени, это происходит сейчас, прежде чем компоненты загружаются в состояние.)
• Создайте компонент с полями, в которых все компоненты имеют имя и временную метку, и в зависимости от имени вставьте свойства.

Что я действительно хочу знать: это решения, которые я думал о жизнеспособности? Или есть другое решение, которое поможет мне лучше?

О, и я не использую флюс или редукцию или что-то еще, потому что atm я стараюсь быть как можно более минималистичным, потому что он очень запутан.

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, а затем оценить там. Итак:

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

Тогда внутри Component, вы можете оценить объект и обеспечить реквизит по умолчанию для каких-либо свойств, которые не существуют. Таким образом, если объект, который вы проходите, не имеет всех реквизитов, React будет предоставлять реквизиты по умолчанию. Например:

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

    } 
}) 

Заметим также, что можно добавить тип логики к вашей map функции также (тот, который обхвата над исходного массива объектов). В каждой итерации вашей карты, вы можете также построить нормированный объект, например:

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