时间戳

首页 > 解决方案 > 试图理解 React 上下文

reactjs - 试图理解 React 上下文

问题描述

我正在尝试了解 Context 是什么，这是我迄今为止收集到的内容：

你的使用方式是，每当你创建一个 Context 时，你必须使用声明的常量来定义子组件中的 contextType，只是为了使用上下文。

这是官方文档中的示例：

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

该示例将所有组件放在同一个文件中，这允许开发人员在 ThemeContext 类中使用 ThemeContext。

我可能有 App.jsx 和其中创建的 Context，用 包装 Home.jsx 组件ThemeContext.Provider，这样我就可以在路上将它与 ThemedButton 一起使用。我必须static contextType = ThemeContext在其 JSX 文件中的 ThemedButton 类中进行操作，这意味着我必须从 App.jsx 导入 ThemeContext。

从文档中定义是：上下文提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递道具。

我不能export const theme = 'light'在其中一个孙子中做和导入它吗？它仍然在中间跳过父母，可以横着走。

标签： reactjs

解决方案

虽然您确实可以直接导出和导入数据，但您将失去能够更新该数据并强制执行新渲染的好处。想象一下，您正在通过上下文传递一种颜色，以及您传递一个可以更新颜色的方法的颜色。

现在，您可以选择让树中的某个子节点调用此更改颜色的方法，并让使用此颜色的组件重新渲染结果。

这不能使用 React 世界之外的数据来完成，就像您在其他地方导出和导入的数据一样。

推荐阅读