Router Eigenschaftswert

Question

im Router offiziellen reagieren reagiert example, gibt es eine ModalSwitch Klasse, mit dem folgenden Code

class ModalSwitch extends React.Component { 

    previousLocation = this.props.location 

    componentWillUpdate(nextProps) { 
     const {location} = this.props 
     if (
      nextProps.history.action !== 'POP' && 
      (!location.state || !location.state.modal) 
     ) { 
      this.previousLocation = this.props.location 
     } 
    } 

    render() { 
     const {location} = this.props 
     const isModal = !!(
      location.state && 
      location.state.modal && 
      this.previousLocation !== location 
     ) 
     return (
      // ... 
     ) 
    } 
} 

1. in der ersten Zeile in der Klasse

   previousLocation = this.props.location 
   

   warum previousLocation auf diese Weise erklärt?

   Ich dachte, ich sollte const vor previousLocation hinzufügen, aber es ist falsch, weil es Syntaxfehler gibt, warum?

   const previousLocation = this.props.location // syntax error 
   

   Oder ich dachte, ich previousLocation innerhalb constructor Funktion setzen sollte aber auch hier ist es falsch

   constructor(){ 
       super(); 
       this.previousLocation = this.props.location // this.props would be undefined, why? 
   } 
   

2. die zweite Frage wäre: ist der Wert von this.props das gleiche in den folgenden Orten?

   previousLocation = this.props.location 
   
   componentWillUpdate(nextProps) {...} 
   
   render(){...} 
   

Answer 1

Für 1. Da previousLocation die Eigenschaft der Klasse ist, so benötigt keine konst. Ich denke, sie verwenden transform-class-properties Plugin. Siehe here

Der ES transpiler wird den Code transpilieren, um die Eigenschaft in den Klassenkonstruktor zu initialisieren.

constructor ein props Wörterbuch erhalten, so dass Sie wie folgt tun müssen:

constructor(props){ 
    super(props); 
    this.previousLocation = this.props.location // this.props would be assign by super(props), in your code, props is undefined. 
    this.previousLocation = props.location 
} 

Für 2. Die Antwort ist ja. Genauer: Alle werden auf die props-Eigenschaft der aktuellen Komponente verwiesen. Im Konstruktor wurden die ursprünglichen Requisiten von der übergeordneten Komponente übergeben. In 'componentWillUpdate' werden 'Requisiten' die alten Requisiten sein, bevor sie Update-Requisiten erhalten. In Render sind die 'Requisiten' beim Rendern. Wenn Sie das Protokoll loggen, hat dies einen anderen Wert, aber die Bedeutung ist gleich.

Zum Beispiel:

Sie haben folgenden Code:

<Component property={this.state.value} /> 

Und state.value ist 5. Dann constructor rufen, und dann render. this.props.value wird 5.

In Elternkomponente sein, wenn sich der Zustand geändert wird:

setState({value: 6}). 

Dann componentWillUpdate aufgerufen. this.props.value ist die alte Requisite, der Wert ist 5, newProps.value wird 6. Dann wird die props aktualisiert und render wird aufgerufen. In render, this.props.value ist 6.