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

IT技术 reactjs react-hooks
2022-07-18 00:04:39

我有以下代码，我试图使用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"));

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

这是问题的一个代码框https://codesandbox.io/s/pedantic-forest-zjlc2

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>;
}
其它你可能感兴趣的问题
上一篇未捕获的 ReferenceError：全局未在 Object../node_modules/fbjs/lib/setImmediate.js 中定义 下一篇尝试在 React Native 中将 mp3 文件作为参数传递，但出现错误。我该如何解决这个问题？我正在使用 Expo-av 作为参考