UseContext 找不到变量？答案

【问题标题】：UseContext can't find variable?UseContext 找不到变量？
【发布时间】：2021-12-27 14:15:35
【问题描述】：

我正在尝试理解 useContext，但我看不出我在这里做错了什么，我收到错误消息“找不到变量：测试”但在我正在阅读的教程中从未说过除了代码中的内容之外，还有什么需要导入/导出的吗？谢谢！

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>
    )
}

【问题讨论】：

嗨@Ollie，不要粗鲁或任何事情，但请在发布问题之前阅读文档：reactjs.org/docs/hooks-reference.html#usecontext - 对文档感到困惑是完全可以的，但在你的问题中说明你'已经读过它，如果是这样不明白它。自己动手，你的技能会增长得更快。
是的，应该看看那个，而不是我看过的其他教程:)

标签： reactjs use-context

【解决方案1】：

您没有从App.js 导出Test，因此您不能只在Home.js 中隐式使用它。

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

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

你可以这样做

import {Test} from './contexts';

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

【讨论】：

啊，我明白了，谢谢！

【解决方案2】：

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

test-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>
  )
}

【讨论】：

【解决方案3】：

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

在您的示例中，Context 只是一个 JS 对象，要访问Test.Consumer，Test 必须在文件范围内。

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

【讨论】：