Destrukturierung Requisiten in reinen Funktionskomponenten

Question

Angenommen wir haben die folgende reine Funktion:

const HeaderComponent =() => (
    <h1> Title <h1> 
) 

export default HeaderComponent 

Jetzt muß ich die neuen Titel von Requisiten erhalten, so dass wir destrukturiert oft this.props Zugriff title mit this.props.title zu vermeiden und in dem Render Methode werden wir so etwas wie haben:

render() { 
    const {Title} = this.props; 
    return(
    <h1> {Title} </h1> 
) 
} 

Die Sache ist, dass wir React.Component Klasse zu erweitern haben Methode zuzugreifen zu machen.

Ist es möglich, die Struktur in reinen Funktionen zu verwenden?

const HeaderComponent = props => (
    // const {Title} = this.props; 
) 

Answer 1

Sie es so machen kann. Ich finde es auch eine gute Möglichkeit, die Funktion selbst zu dokumentieren.

const HeaderComponent = ({ title }) => (
    <h1>{ title }<h1> 
) 

können auch Standardwerte

const HeaderComponent = ({ title: 'Default Title' }) => (
    <h1>{ title }<h1> 
) 

UPDATE: Als T.J. Crowder weist darauf hin, Title oben in Ihren Beispielen aktiviert wird. Im Textteil ist es Kleinbuchstaben; wie das ist die Norm, habe ich die Kleinbuchstaben-Version verwendet

Answer 2

Für Ihre spezifische Situation finden ken4z's answer, als Parameter Destrukturierung der knappste Art und Weise ist, das zu tun.

Aber im allgemeinen Fall: Wenn Sie Logik haben Sie in der Pfeilfunktion vor der Rückkehr setzen müssen, verwenden Sie einfach die ausführliche Form von Pfeil Funktion:

const HeaderComponent = props => { 
    const {Title} = props; 
    // ....more logic can go here... 
    return <h1>{Title}<h1>; 
}; 

Aber auch hier, nicht wahr brauchen, dass nurTitle von props greifen.

---

(Randbemerkung: Es ist ungewöhnlich, die T in title zu nutzen, wenn es ein Eigenschaftsnamen oder Variablenname ...)