[英]How to use hooks as value of context provider in react js typescript
[英]React - How to get the value of the hooks inside the context
我有一个课程主题组件。 我使用了一个钩子,然后我使用上下文在Test组件中应用逻辑,问题是我不明白如何从钩子中获取color
值并将其应用到上下文中。 export const CounterContext = createContext ([ ]);
我需要在CounterContext
中应用值color
课程主题.jsx
import React, {useState, useEffect, createContext} from "react";
import ThemeContext from "./ThemeContext";
export default function LessonThemes(props) {
const [color, setColor] = useState(localStorage.getItem("color"));
const [themes, setThemes] = useState([
{ name: "G", color: "green" },
{ name: "R", color: "red" },
{ name: "B", color: "blue" },
])
useEffect(() => {
localStorage.setItem("color", color);
})
const SideBarPageContent = (SideBarPageContentBackground) => {
localStorage.setItem('color', SideBarPageContentBackground);
setColor(SideBarPageContentBackground);
}
return (
<CounterContext.Provider value={[color, setColor]}>
{
themes.map((theme, index) => {
return (
<label key={index}>
<input
onChange={() => SideBarPageContent(theme.color)}
type="radio"
name="background"
/>{theme.name}</label>
);
})
}
</CounterContext.Provider>
);
}
export const CounterContext = createContext([]);
课程.js
import React, { useContext } from "react";
import "./css/Sidebar.css";
export default function Test(props) {
const [color] = useContext(CounterContext);
return (
<div className="page-wrapper chiller-theme toggled">
<LessonThemes />
<div style={{background: color}}>
<i className="fas fa-bars"></i>
</div>
</div>
);
}
您的操作方式似乎没有任何问题,但尚不清楚您需要如何使用该Context.Provider
。
我假设您已经制作了一个功能最少的示例,因为从您的示例代码中,首先不需要Context
存在,因为您没有在上下文提供程序“下”呈现任何组件。
这就是您从嵌套组件中使用它的方式。 即: <YourContext.Provider/>
下的一个组件。
const CounterContext = React.createContext([]); function LessonThemes(props) { const [color, setColor] = React.useState("initialColor"); const [themes, setThemes] = React.useState([ { name: "G", color: "green" }, { name: "R", color: "red" }, { name: "B", color: "blue" }, ]) const inputItems = themes.map((theme,index) => ( <React.Fragment> <label key={index}> <input onChange={() => setColor(theme.color)} type="radio" name="background" /> {theme.name} </label> </React.Fragment> )); return ( <CounterContext.Provider value={[color, setColor]}> {inputItems} <NestedComponent/> </CounterContext.Provider> ); } // NESTED COMPONENT THAT WILL CONSUME THE CONTEXT function NestedComponent() { const [color,setColor] = React.useContext(CounterContext); return( <div> <div>I am NestedComponent</div> <div><b>color:</b>{color}</div> </div> ); } ReactDOM.render(<LessonThemes/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.