javascript - 如何通过 react 上下文api传递多个状态

Question

我正在创建一个 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)的规则。

Answer 1

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;