Question

我尝试使用对象文字设置defaultProp，但过了一段时间后我意识到React类构造函数没有将默认道具与应用的道具合并，所以我最终得到任何属性的未定义值在defaultProps文字中，尚未包含在已应用的道具中。有没有办法合并默认道具和应用道具，还是我需要将我的对象分解成几个道具？

class Test extends React.Component {
  constructor(props) {
    super(props);

    //props.test is only {one: false}
    //props.test.two is undefined

  }
  render() {
    return (<div>render</div>)
  }
}

Test.defaultProps = {
  test:  {
    one: true,
    two: true
  }
}


ReactDOM.render(<Test test={{'one': false}}/>, document.getElementById('#test'));

http://codepen.io/adjavaherian/pen/oYNPLz

Answer 1

React只对默认道具和实际道具进行浅层合并，即嵌套的默认道具被覆盖而不是合并。这是设计的。

请参阅this React issue了解更多背景信息和推理原因以及可能的解决方法：

除了这里的潜在性能问题。这个问题的一个问题是你如何处理像数组这样的嵌套复杂结构？级联？联盟？一组对象怎么样？深度对象合并可能导致意外行为，这就是为什么通常实现允许您指定合并策略，例如_。合并。我不确定如何在道具类型声明中这样做。

Answer 2

这是一种迟来的回答，但我找不到任何正式或更佳的方法来分配Error: Traceback (most recent call last): File "./test_program.py", line 266, in <module> where :3 IS NOT NULL''',rows3) TypeError: expecting string or bytes object以便将道具与默认值进行合并！

我以自己的方式做到了，如下所示：

在呈现函数或类之前定义一个default props变量
使用

defaultProps

获取道具对象 var 与默认变量 var 合并。

当然，您应该对嵌套对象和数组进行更多编码，以使此方法顺利进行！ const var = Object.assign({}, defaultProps.var , props.var);函数用于浅层合并。

最好的方法是使用* loadash 库的assign函数。

分配_.merge和App.propTypes

完整示例

App.defaultProps

React.Component.defaultProps对象被覆盖，没有合并？

2 个答案:

完整示例