Reagieren - gibt es eine ähnliche Möglichkeit, Zustandseigenschaften zu deklarieren?

Question

Also, in den neuen ES6 Reagieren Weise, so etwas zu sehen, ist sehr häufig:

render() 

    const { thing1, thing2, thing3 } = this.props 

    ...other stuff 

Gibt es ein vergleichbares Verfahren für Zustandseigenschaften, die existieren können oder nicht?

Es wird sehr ermüdend zu haben Zustandsvariablen wie folgt zu verwenden:

<h1>{this.state && this.state.title ? this.state.title : ''}</h1> 

Answer 1

Diese eigentlich Destrukturierung Zuordnung genannt wird, ist es ein es6 Feature Sie hier lesen: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Sie können leicht tun, nur, auf ein beliebiges Objekt:

const { title } = this.state 

Answer 2

Nun, this.state ist immer nicht-null, wenn yo Sie geben ihm einen Wert während des Baus. Und Sie können den Titel Test normalerweise mit einem einfachen || vereinfachen: this.state.title || "".

Hier ist ein vollständiges Beispiel:

class Foo extends React.Component { 
    static propTypes = { 
     thing1: PropTypes.string, 
     thing2: PropTypes.string.isRequired, 
    }; 

    // initialize state during construction 
    state = { title: undefined, a: 1, b: 2 }; 

    render() { 
     const { thing1, thing2 } = this.props; 
     const { title, a, b } = this.state; 

     return (
      <div> 
       {thing1 && <div>{thing1}</div>} 
       <div>{thing2}</div> {/* isRequired so will never be null */} 
       <div>{title || ""}</div> 
       {a && <div>{a}</div>} {/* only render if a is truthy */} 
       <div>{b || "no b"}</div> {/* render "no b" if b not set */} 
      </div> 
     ); 
    } 
}