破坏ES6默认值反应的道具

问题描述：

<ComponentB from="3/1/2016" to="12/1/2016" />破坏ES6默认值反应的道具

，并以componentB的构造，我可以做

const { from, to } = this.props但是从价值我是可选的。我不能这样做

this.state = { from, to }如果它们是或为空。任何方式来设置销毁的默认值？

我可以做if(from && to) {}但只是好奇什么是在反应中处理可选道具的最佳方式。

答

考虑使用类型检查和defaultProps设置您期望在此处查看文档的道具的默认值。 https://facebook.github.io/react/docs/typechecking-with-proptypes.html

在你的情况下，你可以定义。

//declare default Props expected by app 
ComponentB.propTypes = { 
from: PropTypes.string, 
to: PropTypes.string.isRequired 
}; 

//set our default values 
ComponentB.defaultProps = { 
to:"0/0/0" 
from:"0/0/0" 
};

考虑在这里我使用的字符串，我宣布to道具是必需的但在从没有isRequired标志。 NB我在这里使用了字符串，但还有很多其他类型可以使用。

答

使用默认道具将默认值设置为'to'和'from'变量。

Component.defaultProps = { 
 
\t from: "28/12/1992", 
 
\t to: "28/12/1992" 
 
};

答

您可以使用任何的这两种方式：

解构过程中分配的默认值变量，像这样：

const { from = 'abc', to ='abc' } = this.props;

如果this.props不包含任何键，它将采用默认值'abc'。

2.使用defaultProps分配默认值的道具变量，就像这样：

ComponentName.defaultProps = { 
    from: 'abc', 
    to: 'abc' 
};

所有的父组件通过了props将被分配这些默认值。

检查这个例子：

var obj = {a: 1, b: 2, c: 3}; 
 

 
var {a=5, b=5, d=5} = obj; 
 

 
console.log(a, b, d);

破坏ES6默认值反应的道具

相关推荐