UseContext 找不到变量？

Question

我正在尝试理解 useContext 但我没有看到我在这里做错了什么，我收到错误消息“无法找到变量：测试”但在教程中我正在阅读它除了代码中的内容之外，从来没有说过需要 import/export 什么？谢谢！

App.js

    import React, { createContext } from 'react';
    const Test = createContext()

    export default function App() {
  return (
    <Test.Provider value="hello">
        <Home/>
    </Test.Provider>  );
}

Home.js

const Home = () => {

    return(
        <Test.Consumer>
                <View style={styles.homeContainer}>
                  {value}
                </View>
        </Test.Consumer>
    )
}

Answer 1

您没有从 App.js 导出 Test，因此您不能在 Home.js.

中隐式使用它

我建议将其移动到另一个文件，例如，contexts.js:

import React from 'react';
const Test = React.createContext();
export {Test};

然后你可以做

import {Test} from './contexts';

在您的其他源文件的两个（或将来的所有）中引用相同的上下文类型。

Answer 2

我建议您在单独的文件中创建上下文：

测试-context.js

import { createContext } from 'react';
export const TestContext = createContext();

App.js

import React from 'react';
import { TestContext } from './test-context';

export default function App() {
  return (
    <TestContext.Provider value="hello">
        <Home/>
    </TestContext.Provider>  
  );
}

在TestContext.Consumer中，您必须提供一个函数来使用上下文值。

Home.js

import React from 'react';
import { TestContext } from './test-context';

export default const Home = () => {
  return (
    <TestContext.Consumer>
      value => (
        <View style={styles.homeContainer}>
          {value}
        </View>
      )
    </TestContext.Consumer>
  )
}

Answer 3

如今，在阅读有关精美图书馆的文档时，我们常常忘记旧学校的规则。

在你的例子中，Context只是一个JS对象，为了访问Test.Consumer，Test必须在文件范围内。

因此，您必须导入 Test 对象（上下文）才能访问 Consumer 属性。

UseContext 找不到变量？

UseContext can't find variable?

reactjs

use-context