在 React 中使用上下文在兄弟姐妹之间传递上下文

Question

我有以下代码，我尝试使用contextapi 从一个组件获取其同级组件的值。

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <TheButton />
      <Display />
    </div>
  );
}

export const NumberContext = React.createContext();

function TheButton() {
  return (
    <NumberContext.Provider value={"test"}>
      <button>Click me</button>
    </NumberContext.Provider>
  );
}

function Display() {
  const context = React.useContext(NumberContext);
  return <div>The answer {context}.</div>;
}

ReactDOM.render(<App />, document.querySelector("#root"));

正如您所看到的，我正在提供程序中传递“测试”值，但是当页面呈现时，我看到的只是“答案”。

这是针对该问题的 Codesandbox https://codesandbox.io/s/pedantic-forest-zjlc2

Answer 1

尽管事实上这为context您提供了一种解耦的传递方式，props但Provider仍然必须处于更高的层次结构上。提供您的背景信息App并从儿童那里获取信息。

export const NumberContext = React.createContext();

function App() {
    const [foo, changeFoo] = useState('foo')
    return (
        <NumberContext.Provider value={{ foo, changeFoo }}>
            <TheButton />
            <Display />
        </NumberContext.Provider>
    );
}


function TheButton() {
    const { changeFoo } = useContext(NumberContext)
    return (
        <button onClick={() => changeFoo('bar')}>Click me</button>
    );
}

function Display() {
    const context = React.useContext(NumberContext);
    return <div>The answer {context.foo}.</div>;
}