React：嵌套的defaultProps深度合并

Question

我有一个定义如下的 track 属性：

  propTypes: {
    track: React.PropTypes.shape({
      cover: React.PropTypes.string,
      title: React.PropTypes.string,
      artist: React.PropTypes.string
    })
  }

如果未定义，我希望track.cover获得默认值：

getDefaultProps: function() {
    return {
      track: {
          cover: 'placeholder.png'
        }
      }
  }

在视图层面上我有机会这样做吗？ getDefaultProps是否进行深度合并？ 还是我需要在模型层面上处理它？

谢谢

- Augustin Riedinger

Answer 1

getDefaultProps不会将传递的属性值与指定的返回值合并。如果该属性不存在，则React将使用getDefaultProps返回的对象来初始化组件实例。

例如，下面的代码会产生以下结果：

Test Cover and

代码：

var TrackItem = React.createClass({
  render: function() {
    var track = this.props.track;
    return (<div>{track.cover} and {track.artist}</div>);
  },
  getDefaultProps: function() {
    return {
      track: {
          artist: 'def artist'
        }
      }
  }        
});

var track = {
    cover: 'Test Cover'    
};
React.render(<TrackItem track={ track } />, mountNode);

此外，请注意，在getDefaultProps中返回的对象是组件所有实例共享的（参考文献）。

- WiredPrairie

---

是的。我发现这个问题需要相同的功能：https://github.com/facebook/react/issues/2568 我现在正在等待讨论，如果你想查看的话。我认为在某些情况下添加深度合并是有意义的！ - Augustin Riedinger

我不确定处理各种情况的复杂性是否真的值得。 - WiredPrairie

对我来说，这似乎并不太复杂。如果它得到验证，我认为我可以提交PR。 - Augustin Riedinger

#1) 并非每个人都需要它（如果不可选，可能会破坏现有组件）， #2) 等效项可以在对象生命周期的其他位置轻松处理， #3) 数组是否合并（特别是如果元素是对象）？ #4) 需要指示属性应为“未定义”，但不采用默认值的方法， #5) 对于大型对象结构，在具有许多默认值（副本）的列表中可能会不必要地膨胀内存等。此外 - 这将如何与正常的lifecycle事件交互？ - WiredPrairie

@WiredPrairie 的观点很好，但是...你不能把实现浅合并的东西命名为 defaultProps。这意味着 defaultProps 的使用仅限于平面对象结构。至少要强制一些约束条件，如果你使用了对象图形，则会发出警告。天啊... - Cristian E.