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，Appointment等（这需要稍后按时间戳对组件进行排序，现在在组件加载到状态之前就会发生这种情况。）
创建一个Component，其中包含所有组件都具有名称和时间戳的字段，并根据名称插入属性。

我真正想知道的是：我认为可行的解决方案是什么？还是有其他解决方案可以帮助我更好吗？

哦，我不使用flux或redux或其他什么，因为atm我试图尽可能地简约，因为它往往会很快混淆。

Answer 1

一种方法是将整个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
        }
    };
});

Answer 2

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

来自对象的多个组件

2 个答案: