破壞ES6默認值反應的道具

Question

<ComponentB from="3/1/2016" to="12/1/2016" />

，並以componentB的構造，我可以做

const { from, to } = this.props但是從價值我是可選的。我不能這樣做

this.state = { from, to }如果它們是或爲空。任何方式來設置銷燬的默認值？

我可以做if(from && to) {}但只是好奇什麼是在反應中處理可選道具的最佳方式。

Answer 1

考慮使用類型檢查和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我在這裏使用了字符串，但還有很多其他類型可以使用。

Answer 2

使用默認道具將默認值設置爲'to'和'from'變量。

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

Answer 3

您可以使用任何的這兩種方式：

解構過程中分配的默認值變量，像這樣：

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);