Reactとして開発された場合、すべてのコンポーネントにステータスを渡す必要があります.
ただし、グローバルステータス管理がない場合.
親がサブアセンブリに渡す方法で...?
もうめまいがします.

Context APIとは

はい、グローバルステータスapiです.
基本的にReactから提供されているので、正式な書類を確認してください.
どうやって使うのか分からない.
ショッピングモールの開発講座を見て、それに従って、今やっと使ったことを知って、複写のために書きます.

Contextが提供するAPI

createContext

Contextオブジェクトを作成します.Contextオブジェクトの要素をレンダーすると、ツリーの上部に最も近いペアProviderから現在の値が読み出されます.

Provider

ContextオブジェクトのReactコンポーネントとして、ProviderはContextを購読するコンポーネントに変更を通知します.
providerはproperties value propsを受信し、サブコンポーネントに渡します.

contextType

createContextによって作成されたContextオブジェクトは、必要なクラスのContextTypeとして指定できます.this.contextを使用して、Contextの最も近いProviderを検索し、その値を読み取ります.

Consumer

コンテキストの変化に注目するReactコンポーネント.
Consumerの子は関数でなければなりません.さもないと吐き出す.
コンテキストの状態に応じてレンダリングすればよい.
例言語に基づいてドキュメントのtitleを変更します.

displayName

書いてないから、とりあえず公式文書で確認しておきましょう
使用後の使用方法

使用例

目的

ドキュメントタイトルの変更を実行するにはselect Boxで国を選択します.

こうぞう

Context
├── node_modules
├── jsconfig.json
├── next.config.js
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── component
│   │   ├── Layout.js
│   │   └── Seo.js
│   ├── modules
│   │   ├── index.js
│   │   └── lang.js
│   ├── pages
│   │   ├── _app.js
│   │   └── index.js
│   └── utils
│       └── data.js
└── yarn.lock

_app.js

うん、名前は何だったっけ、一番優秀な両親?にLangProviderを追加します.
これにより、contextがサブコンポーネントに送信されます.
_app.jsは、正式なドキュメントでページロード前に初期化されたコンポーネントと呼ばれます.
これはページ全体で共通に使用されるContextであるため、ページのロードと初期化の過程で、contextをページコンポーネントにグローバルに配布することができる.

modules/lang.js

SelectBoxにvaluechangeアクティビティに割り当てるメソッド関数とlangstateを指定します.
ここでContext APIが提供するAPIはどれくらいありますか?使い果たしたようだ.createContext / Provider / Consumerの概念が使われています.

pages/index.js-ログインページ

実はセレクションボックスの部分を出す必要はありません.
摘みました.static contextType = LangContext番バスLanguageSelect要素のコンテキストが指定されています.onChange 이벤트がLangContextであるsetLang메서드を選択ボックスに指定します.

component/Layout.js

ここでもcontextをLangContextと指定し、SEO 컴포넌트に渡した.
しかし私はこの文章を书いた后に発见して、SEO 컴포넌트から直接受け取ることができて、しかしむだにしたようで、私は改正することができて、ほほほ

component/SEO.js

next-seoライブラリを使用して作成した構成部品.
OpenGraph設定など…?気持ち良さそうなものが多いですが、使うのは初めてです.
next-seo_GITHUB好奇心がある時探しましょう

完了