Question

假设组件从其父级接收React中的嵌套属性：

getDefaultProps: function(){
    return ({
        "data" : {
            "style": {
                pieChart: true, // otherwise it'd be a donut chart
                radius: 100
            },
            "series": {
                "data": []
            }
        }
    });
},

可能会收到一些缺少值的属性（例如，我们可能会收到系列但不会收到样式，或者我们可能会收到半径值而不是pieChart值）

我们如何仅为缺失值定义默认值？并在接收时保留其余的值

Answer 1

您无法在getDefaultProps方法中设置深层对象的默认值，但您可以在componentWillMount方法中设置。

React.createClass({
  getDefaultProps() {
    return {
      "data" : {
        "style": {
          pieChart: true, // otherwise it'd be a donut chart
          radius: 100
        },
        "series": {
          "data": []
        }
      }
    }
  },

  componentWillMount() {
    if(!this.props.data.style) {
      this.props.data.style = {
        pieChart: true,
        radius: 100
      };
    }
    if(!this.props.data.series) {
      this.props.data.series = {
        data: []
      };
    }
  }
});

但是不建议这样做，因为React最佳实践规定您不应该从组件中修改this.props。你真正应该做的是使用componentWillMount中的逻辑来根据自己的喜好格式化对象，然后再将其传递给组件。

Answer 2

道具意味着被覆盖。您可以使用componentWillReceiveProps函数来处理旧道具和新道具之间的任何协商，但您必须自己写出逻辑。不完全确定您的数据结构是什么样的，但我确信您可以使用下划线_.extend和_.defaults来完成工作。

在ReactJS中设置缺少属性的默认值

2 个答案: