非構造小道具は

Question

たちは、次の純粋な機能を持っていると仮定します。

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

export default HeaderComponent 

は、今私は小道具から新しいタイトルを受信する必要があるので、私たちはしばしばthis.props.titleでtitleへのアクセスを避けるためにthis.propsをdestructureとレンダリングに事は、我々はrenderメソッドをアクセスするためにReact.Componentクラスを拡張する必要がある

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

：この方法は、我々のようなものを持っています。

純粋な関数でdestructureを使用することはできますか？

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

Answer 1

あなたはこのようにそれを行うことができます。私はそれが機能を自己文書化する良い方法だと思う。

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

も設定することができ、デフォルト値

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

UPDATE： T.J. Crowderとしてポイントうち、Titleは、上記のあなたの例では大文字になります。テキスト部分では小文字です。それが標準であるので、私は小文字のバージョンを使用しました

Answer 2

具体的な状況については、ken4z's answerを参照してください。パラメータの構造化が最も簡潔な方法です。

しかし、一般的なケースでは：あなたは、ロジックを持っている場合は、あなただけの矢印機能の冗長な形式を使用して、前のリターンに矢印機能に配置する必要があります。

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

しかし、再び、あなたはしないでくださいはTitleからpropsを取得するためにちょうどが必要です。

---

（サイドノート：それはそれは、プロパティ名や変数名だときtitleにTを大文字に珍しい...）