我正在创建一个 react 游戏应用程序,我想跨多个组件传递状态。为此,我第一次尝试 react 上下文 api。
所以这是我的 GameContext.js
import React, { useState, createContext } from 'react';
const GameContext = createContext();
const GameProvider = ({ children }) => {
const [name, setName] = useState('');
const [color, setColor] = useState('');
const [startgame, setStartgame] = useState(false);
return (
<GameContext.Provider value={[name, setName]}>
{children}
</GameContext.Provider>
);
};
export { GameContext, GameProvider };
而且我可以访问
name
在子组件中使用import { GameContext } from '../../context/GameContext';
const [name, setName] = useContext(GameContext);
console.log(name);
但是现在我想将其他状态值放入同一个子组件中,例如
[color, setColor]
和 [startgame, setStartgame]
,来自 GameContext.js。如何将这些值放入子组件中?我还有一个问题,不知怎的,我觉得这是一个非常愚蠢的问题,但是为什么我不能在 GameContext.js 中做这样的事情呢?...
<GameContext.Provider value={[name, setName,color, setColor, startgame, setStartgame]}>
并像这样获取子组件中的值...
const [name, setName,color, setColor, startgame, setStartgame] = useContext(GameContext);
我试过这个,但浏览器提示我违反了 react 钩子(Hook)的规则。
最佳答案
Provider 接受传递任何值,因此您可以在此处 paas 对象并将您的值作为属性。
<GameContext.Provider
value={{ name: [name, setName], color: [color, setColor] }}
>
{props.children}
</GameContext.Provider>;
以及您在 Child 中访问的位置 const { name, color } = React.useContext(GameContext);
const [nameValue, setnameValue] = name;
const [colorValue, setcolorValue] = color;
关于javascript - 如何通过 react 上下文api传递多个状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60866924/