Question

我有一个反应组件，如：

ReactDOM.render(<someReactComponent someObjectParam={ 'key1': 'value1', 'key2': 'value2'} />, document.getElementById('someDivID'));

我确定someObjectParam会有key1，我想让'key2'成为可选的所以，在我的反应组件中，我尝试了类似的内容：

var someReactComponent = React.createClass({
        propTypes: {
            someObjectParam: React.PropTypes.object.isRequired,
        },
        getDefaultProps: function() {
            return {
                //even tried someObjectParam['key2']:'' 
                someObjectParam.key2: ''
            };
       }
       render: function () {.....}
       });

但getDefaultProps中的语法错误。有没有办法正确定义它？

PS：我知道在渲染功能中做一些像this.props.someObjectParam.key2 || ''这样的事情，或者将key1和key2设置为不同的道具，但是我采用更具说明性的方式这样做，我无法将我的整个对象定义为我正在做的其他逻辑的默认值。

非常感谢任何帮助。

Answer 1

由于属性是一个对象，你必须返回一个对象，但你当然可以返回一个只填充了一个特定键的对象：

getDefaultProps: function() {
    return {
       someObjectParam: { key1: "default" }
    }
}

我确定someObjectParam会有key1而我想制作＆＃39; key2＆＃39; 作为可选

如果这是您要做的事情，而不是您真正希望将key1和key2作为单独的属性，而不是单个属性。无法部分填充默认属性。

您可以在constructor中应用一些默认逻辑，这样您就不必担心render函数：

constructor(props) {
    props.objectParam.key2 = props.objectParam.key2 || "default";
    super(props);
}

如果属性可以更新，您在componentWillUpdate中也需要相同的逻辑。在这一点上，我会说它并不值得，只需在你的render函数中处理它。

Answer 2

这个问题已经很老了，但是我今天在研究这个问题时发现了它，所以我的答案在这里。

更“声明式”的模式是将someObjectProp合并为someObjectDefaults，例如：

const defaults = { key2: "key 2 default value" }
const someObject = Object.assign({}, defaults, this.props.someObjectProp)

// or a nicer, ES6 syntax:
const someObject = { ...defaults, ...this.props.someObjectProp }

然后使用someObject代替那里的this.props.someObjectProp

当定义道具时，

React的defaultProps不会合并，因此您无法在此处设置“深度默认值”。

作为默认道具，将对象的特定键分配

2 个答案: