Zerstörung es6 Standardwert in reagieren die Requisiten

Question

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

und in componentB Konstruktor I

const { from, to } = this.props tun können, aber mein von zu Wert ist optional. Ich kann nicht

this.state = { from, to }, wenn sie oder null sind. Kann ich den Standardwert für die Zerstörung festlegen?

Ich kann if(from && to) {} tun, aber nur neugierig, was ist der beste Weg, um optionale Requisiten zu reagieren.

Answer 1

Verwenden Sie typechecking und defaultProps, um die Standardwerte für die erwarteten Requisiten einzurichten. Hier finden Sie die Dokumente. https://facebook.github.io/react/docs/typechecking-with-proptypes.html

In Ihrem Fall könnten Sie definieren.

//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" 
}; 

Betrachten Sie hier verwendete ich String und ich erklärte, dass die to Stütze erforderlich, aber die von nicht über die isRequired Flagge. NB Ich habe hier String verwendet, aber es gibt zahlreiche andere Arten, die Sie verwenden können.

Answer 2

Verwenden Sie Standardrequisiten, um Standardwerte auf 'to' und 'from' Variablen zu setzen.

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

Answer 3

Sie eine dieser zwei Arten verwenden:

1. die Standardwerte der Variablen während der Destrukturierung Weisen, wie folgt aus:

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

Wenn this.props keinen Schlüssel enthält, wird der Standardwert 'abc' verwendet.

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

Alle von übergeordneten Komponente props diese Standardwerte zugewiesen werden übergeben:

2. Verwenden defaultProps die Standardwerte zu Requisiten Variable, wie diese zuweisen.

prüfen dieses Beispiel:

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

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

 
console.log(a, b, d);