Reactのコンテキストとプロパティの説明

1. 文脈

1. 使用シナリオ

子孫コンポーネントに値を渡したいシナリオを想像してください。どうすればよいでしょうか?

小道具を使って層ごとに受け渡すと、非常に面倒になります。

より良い方法: contextを使用してコンポーネント間でデータを渡す

2. 使用手順

• React.createContext() を呼び出して、Provider (データを提供) と Consumer (データを消費) の 2 つのコンポーネントを作成します。

const { プロバイダー、コンシューマー } = React.createContext()

• プロバイダー コンポーネントを親ノードとして使用します。

<プロバイダー>
  <div className="アプリ">
    <子供1 />
  </div>
</プロバイダー>

• 渡されるデータを示すために value 属性を設定します。

<プロバイダー値="ピンク">

• データを受信するには、Consumer コンポーネントを呼び出します。

<消費者>
  {data => <span>データ パラメータは受信したデータを表します -- {data}</span>}
</消費者>

3. 結論

• 2つのコンポーネントが複数のレイヤーにネストされている場合、コンテキストを使用してコンポーネント通信を実装できます。
• Context ProviderとConsumerという2つのコンポーネントを提供します。
• Providerコンポーネント: データを提供するために使用される
• Consumerコンポーネント: データの消費に使用

2. 小道具の詳細

1. 子供の財産

children 属性: コンポーネント タグの子ノードを表します。コンポーネントタグに子ノードがある場合、propsにはこの属性が設定されます。

childrenプロパティは通常のpropsと同じで、その値は何でもかまいません（テキスト、ラベル、コンポーネント、関数など）。

コードは次のとおりです（例）：

関数Hello(props) {
  戻る （
    <div>
      コンポーネントの子ノード: {props.children}
    </div>
  ）
}
<Hello>私は子ノードです</Hello>

2. 小道具の検証

コンポーネントの場合、props は外部データのコンテナであり、コンポーネント ユーザーによって渡されるデータの形式は保証されません。

受信データの形式が正しくない場合、コンポーネントでエラーが発生する可能性があります。

重要な問題: 構文エラーメッセージ以外の追加のエラーメッセージがない

コードは次のとおりです（例）：

// 作成されたコンポーネント function App(props) {
  定数 arr = props.colors
  const list = arr.map((item, index) => <li key={index}>{item}</li>)
  戻る （
    <ul>{リスト}</ul>
  ）
}
// コンポーネントを使用する場合 <App colors={19} />

プロパティ検証: コンポーネントを作成するときにプロパティのタイプと形式を指定できます。

目的: コンポーネントの使用時にプロパティによって発生するエラーをキャプチャし、明確なエラープロンプトを表示して、コンポーネントの堅牢性を高めます。

3. Props検証の使用手順

• prop-types をインストールします (npm i prop-types)
• prop-typesパッケージをインポートする
• コンポーネントのプロパティに検証ルールを追加するには、コンポーネント名.propTypes = {} を使用します。
• 検証ルールはPropTypesオブジェクトを通じて指定されます

'prop-types' から PropTypes をインポートします
関数App(props) {
  戻る （
    <h1>こんにちは、{props.colors}</h1>
  ）
}
App.propTypes = {
  // colors プロパティは配列型であることが合意されています // 型が正しくない場合は、エラー分析を容易にするために明確なエラーが報告されます colors: PropTypes.array
}

4. Props検証制約ルール

一般的な型: number 、 string 、 array 、 bool 、 func 、 object

React要素タイプ: element

必須: isRequired

特定の構造のオブジェクト: shape({ })

// 共通型optionalFunc: PropTypes.func,
// 必須関数: PropTypes.func.isRequired、
// 特定の構造のオブジェクトoptionalObjectWithShape: PropTypes.shape({
  色: PropTypes.文字列、
  フォントサイズ: PropTypes.number
})

5. デフォルトのプロパティ値

シナリオ: ページネーションコンポーネント → ページあたりに表示される項目数

機能: プロパティのデフォルト値を設定します。これは、プロパティが渡されない場合に有効になります。

関数App(props) {
  戻る （
    <div>
      props のデフォルト値はここに表示されます: {props.pageSize}
    </div>
  ）
}
// デフォルト値を設定する App.defaultProps = {
  ページサイズ: 10
}
// pageSize 属性を渡さないでください <App />

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。