小道具に反応する

小道具を使用してReactコンポーネントの周りにデータを渡す方法

小道具は、コンポーネントがプロパティを取得する方法です。最上位のコンポーネントから始めて、すべての子コンポーネントは親から小道具を取得します。関数コンポーネントでは、小道具だけが渡され、追加することで利用できます。props関数の引数として:

const BlogPostExcerpt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

クラスコンポーネントでは、小道具はデフォルトで渡されます。特別なものを追加する必要はなく、次のようにアクセスできます。this.propsコンポーネントインスタンスで。

import React, { Component } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) } }

小道具を子コンポーネントに渡すことは、アプリケーションで値を渡すための優れた方法です。コンポーネントは、データを保持する(状態がある)か、小道具を介してデータを受信します。

次の場合は複雑になります。

  • 数レベル下の子からコンポーネントの状態にアクセスする必要があります(状態を知る必要がなくても、以前のすべての子はパススルーとして機能する必要があり、事態は複雑になります)
  • 完全に無関係なコンポーネントからコンポーネントの状態にアクセスする必要があります。

小道具のデフォルト値

値が不要な場合、コンポーネントの初期化時にデフォルト値がない場合は、デフォルト値を指定する必要があります。

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

BlogPostExcerpt.defaultProps = { title: ‘’, description: ‘’ }

のようないくつかのツールESLint明示的に必要とされないいくつかのpropTypesを使用して、コンポーネントのdefaultPropsの定義を強制する機能があります。

小道具の受け渡し方法

コンポーネントを初期化するときは、HTML属性と同様の方法で小道具を渡します。

const desc = 'A description'
//...
<BlogPostExcerpt title="A blog post" description={desc} />

タイトルをプレーンな文字列として渡しました(できることのみ文字列で行います!)、変数としての説明。

子供達

特別な小道具はchildren。これには、で渡されるすべての値が含まれますbodyコンポーネントの例:

<BlogPostExcerpt title="A blog post" description="{desc}">
  Something
</BlogPostExcerpt>

この場合、内部BlogPostExcerpt見上げると「何か」にアクセスできますthis.props.children

小道具を使用すると、コンポーネントは親からプロパティを受け取り、たとえば一部のデータを印刷するように「指示」されますが、状態を使用すると、コンポーネントはそれ自体で生命を維持し、周囲の環境から独立できます。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: