Question

如果我有Comp1.js

const Comp1 = () => {
  const globalTheme = new createContext()
  return (
    <globalTheme.Provider globalStyle={anyVar}>
     <Layout>
      <AnotherComponent />
     </Layout>
    </globalTheme.Provider>
  )
}

然后在layout.js

  const globalStyle = useContext(globalTheme)
  console.log(globalStyle)

我得到globalTheme is not defined，是否应该再次创建上下文？

  const globalTheme = new createContext()
  const globalStyle = useContext(globalTheme)
  console.log(globalStyle)

然后我得到undefined的{{1}}

我想念什么？

编辑：根据评论，我使用第三个文件并导入上下文以访问它-> globalStyle

theme-context.js

然后，我在另一个文件import { createContext } from 'react' export const themes = { light: { foreground: '#000000', background: '#eeeeee', }, dark: { foreground: '#ffffff', background: '#222222', }, } export const ThemeContext = createContext( themes.dark // default value )

中提供此上下文

blog-template.js

然后在import { ThemeContext } from '../context/theme-context' import Layout from '../components/layout' const Blog = () => { let globalStyle = 'just any value' return ( <ThemeContext.Provider globalStyle={globalStyle}> <Layout /> </ThemeContext.Provider> )}

layout.js

但是import React, { useContext} from 'react' import { ThemeContext } from '../context/theme-context' const Layout = () => { const globalStyle = useContext(ThemeContext) console.log(globalStyle) }是不确定的，为什么？

编辑：错误是不提供价值作为道具

globalStyle

Answer 1

您要在组件外部使用createContext，并在Provider道具中使用value，其中包含要在树的更下方使用的数据。

示例

const { createContext, useContext } = React;
const GlobalTheme = createContext();

const Comp1 = () => {
  const anyVar = { color: "red" };

  return (
    <GlobalTheme.Provider value={anyVar}>
      <Layout>
        <AnotherComponent />
      </Layout>
    </GlobalTheme.Provider>
  );
};

const Layout = ({ children }) => {
  const globalStyle = useContext(GlobalTheme);

  return <div style={globalStyle}>{children}</div>;
};

const AnotherComponent = () => {
  return <div> Foo </div>;
};

ReactDOM.render(<Comp1 />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 2

最好在单独的文件中创建上下文，以便可以导出它并在多个位置使用它，其中之一是useContext()钩子。无论如何，当Context中的数据更改时，都会重新渲染。

反应：useContext，如何从外部组件检索它？

2 个答案: