Question

redirectafterlogin/ ├── classes │ └── observer.php ├── db │ └── events.php └── version.php

并且在componentB的构造函数中我可以做到

<ComponentB from="3/1/2016" to="12/1/2016" />但我的值是可选的。我无法做到

const { from, to } = this.props如果是或为空。有什么方法可以设置销毁的默认值吗？

我可以做this.state = { from, to }但只是好奇什么是处理反应中的可选道具的最佳方法。

Answer 1

您可以使用以下两种方式中的任何一种：

1。在解构期间将默认值分配给变量，如下所示：

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

如果this.props不包含任何密钥，则会采用默认值＆＃39; abc＆＃39;。

2。使用defaultProps将默认值分配给props变量，如下所示：

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

从父组件传递的所有props都将被分配这些默认值。

检查此示例：

＆＃13;

var obj = {a: 1, b: 2, c: 3};

var {a=5, b=5, d=5} = obj;

console.log(a, b, d);

＆＃13;

Answer 2

考虑使用类型检查和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道具是必需的但是from没有isRequired标志。 NB我在这里使用了字符串，但是你可以使用许多其他类型。

Answer 3

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

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

反应的道具中的破坏es6默认值

3 个答案: