コンポーネント間で値を渡す
コンテキスト オブジェクト -- コンテキスト オブジェクト
React コンポーネント間で渡されるデータは、props を介して渡されます。これは一方向の転送です。データは、props を介してレイヤーごとに親から子、孫に渡されます。コンポーネントはレイヤーごとにネストされる場合があります。つまり、これはメソッドはレイヤーごとに渡すのが面倒なのでレイヤーごとにジャンプしたい場合はコンテキストを使います
コンテキスト:コンテキストオブジェクト
コンテキストは、コンポーネント間で値を渡す複雑さを非常にうまく解決します。コンポーネント間でデータを迅速に転送できます。
コンテキストを使用してコンポーネント間で値を渡したい場合は、createContext() メソッドを使用する必要があります。このメソッドは次の 2 つのオブジェクトを提供します。
プロバイダ オブジェクト プロデューサ ----> データの生成に使用 コンシューマ オブジェクト コンシューマ ----> データの使用に使用
import React, { Component } from 'react'
// 1.创建context对象
const GlobalContext = React.createContext()
class Zia extends Component {
render() {
return (
<div>
我是第一个子组件
</div>
)
}
}
class Zib extends Component {
render() {
return (
<div>
我是第2个子组件
{/* 3.任意组件引入GlobalContext并调用context，使用GlobalContext.Consumer（消费者） */}
<GlobalContext.Consumer>
{/* 4.在回调函数中直接使用生产者的数据 */}
{
(value) => {
return <h1>{value.name}</h1>
}
}
</GlobalContext.Consumer>
</div>
)
}
}
export default class fu extends Component {
render() {
return (
// 2.在根组件件引入GlobalContext，并使用GlobalContext.Provider生产者
// 并且使用value属性传入数据
<GlobalContext.Provider value={
{ name: "xixi", age: 18 }}>
<div>
我是根组件
<Zia />
<Zib />
</div>
</GlobalContext.Provider>
)
}
}関数コンポーネントはコンテキスト オブジェクトを使用します
React16.8以降、フックという新機能が追加されました。そのうちの 1 つは useContext で、関数コンポーネントでのコンテキスト オブジェクトの使用の複雑さを簡素化できます。
useContext
コンテキスト オブジェクト (React.createContext の戻り値) を受け取り、コンテキストの現在の値を返します。
コンテキスト オブジェクトの Consumer コンシューマー内のデータを直接取得できます(コンシューマーの使用の複雑さを簡素化します)。
使用しないときにコンポーネント間で値を渡す
import React, { createContext } from 'react'
let context = createContext()
function Sun() {
return (
<div>
孙
<context.Consumer>
{
(value)=>{
return (
<h1>{value.name}</h1>
)
}
}
</context.Consumer>
</div>
)
}
function Zi() {
return (
<div>
子
<Sun></Sun>
</div>
)
}
export default function Fu() {
return (
<context.Provider value={
{name:"xixi",age:18}}>
<div>
父
<Zi></Zi>
</div>
</context.Provider>
)
}
useContext を使用する
import React, { createContext,useContext } from 'react'
let context = createContext()
function Sun() {
// 使用useContext可以直接得到Consumer中的数据
let value=useContext(context)
return (
<div>
孙
<h1>{value.name}</h1>
</div>
)
}
function Zi() {
return (
<div>
子
<Sun></Sun>
</div>
)
}
export default function Fu() {
return (
<context.Provider value={
{name:"xixi",age:18}}>
<div>
父
<Zi></Zi>
</div>
</context.Provider>
)
}