Question

我有以下代码，我尝试使用context API从一个组件到同级组件获取值。

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"));

您可以看到我在提供程序中传递了“测试”值，但是当页面呈现所有内容时，我看到的是“答案”。

这里是问题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>;
}

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

1 个答案: