首頁(yè) 猿問如何解決：上下文提供程序沒有將新的...

如何解決：上下文提供程序沒有將新的上下文值傳遞給子項(xiàng)

JavaScript

侃侃爾雅 2021-08-20 19:09:19

我剛開始使用 React Hooks 和 React Context，我想知道為什么我的 Context Provider 似乎沒有將新值傳遞給子組件。我已將其設(shè)置為初始值“ColorContext”為“紅色”，但我希望按鈕中“ColorContext”的值為“綠色”。但是，當(dāng)我嘗試這樣做時(shí)，“ColorContext”值不會(huì)改變并保持“紅色”。這是我的代碼的鏈接：https : //stackblitz.com/edit/react-8mhqwuimport React, { Component, useState, useContext, createContext } from 'react';import { render } from 'react-dom';const ColorContext = createContext('red')const App = (props) => { return ( <div className="app"> <ColorContext.Provider value= {'green'}> <button style = {{backgroundColor: useContext(ColorContext)}} > Click here </button> </ColorContext.Provider> </div> )}render(<App />, document.getElementById('root'));

查看完整描述

3 回答

一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個(gè)贊

見鉤子規(guī)則：

只在頂層調(diào)用鉤子

不要在循環(huán)、條件或嵌套函數(shù)中調(diào)用 Hook。相反，始終在 React 函數(shù)的頂層使用 Hook。通過遵循此規(guī)則，您可以確保每次渲染組件時(shí)以相同的順序調(diào)用 Hook。

因此，使用useContexthook 來創(chuàng)建一個(gè)新的消費(fèi)組件是一種很好的做法。

const ColorContext = createContext('red');

const Button = () => {

const value = useContext(ColorContext);

return (

<button style = {{backgroundColor: value}}

>

{value}

</button>

);

};

const App = (props) => {

return (

<ColorContext.Provider value={'blue'}>

</ColorContext.Provider>

</div>

)

};

反對(duì) 回復(fù) 2021-08-20

蕪湖不蕪

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊

您需要App使用上下文包裝組件。

const App = (props) => {

return (

<button

style = {{backgroundColor: useContext(ColorContext)}}

>

Click here

</button>

</div>

)

}

render(<ColorContext.Provider value= {'green'}><App /></ColorContext.Provider>, document.getElementById('root'));

反對(duì) 回復(fù) 2021-08-20

猛跑小豬

TA貢獻(xiàn)1858條經(jīng)驗(yàn) 獲得超8個(gè)贊

從反應(yīng) useContext文檔：

當(dāng)<MyContext.Provider>組件上方最近的更新時(shí)，此 Hook 將使用傳遞給該 MyContext 提供程序的最新上下文值觸發(fā)重新渲染。...
useContext(MyContext)只允許您閱讀上下文并訂閱其更改。您仍然需要樹中的a <MyContext.Provider> above來提供此上下文的值。

這意味著上下文需要位于您要更新的組件之上。即它需要是<App />您示例中組件的父級(jí)。

因此，Giang 是對(duì)的，您需要<App />在ColorContext.Provider組件中定義。

反對(duì) 回復(fù) 2021-08-20