为什么我无法从一个组件抓取状态到另一个组件？

Question

• 我有两个功能组件（组件1），它是一个主要组件和（组件2），我想从中获取状态数据

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const TestContext = createContext();

function Component1() {
  const test = useContext(TestContext);
  return (

      <h1>{`${test}`}</h1>
      
  );
}

function Component2() {
      const [test, setTest] = useState("From Component 3");

  return (
    <TestContext.Provider value={test}>
      <Component1 />
    </TestContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component1 />);

在这个问题中：

• 我只想使用 useContext Hook 来带来状态
• 我想要Component1是渲染的组件

• 我尝试了很多，但结果总是“未定义”

Answer 1

您需要确保

Component1

在

Component2

上下文提供程序中呈现。

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const TestContext = createContext();

function Component1() {
  const test = useContext(TestContext);
  return (
    <h1>{`${test}`}</h1>
  );
}

function Component2() {
  const [test, setTest] = useState("From Component 3");

  return (
    <TestContext.Provider value={test}>
      <Component1 />
    </TestContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component2 />);

1. Component1

   通过渲染

   Component2

   而不是直接渲染

   Component2

   在

   Component1

   上下文提供程序中渲染。

2. Component2

   为其子级提供上下文值，包括

   Component1

   。

3. Component1

   使用

   useContext

   钩子消耗上下文值。

现在，当您渲染

Component2

时，

Component1

将收到

Component2

提供的上下文值。