组合 useContext 提供者

Question

当我创建一个 reactjs 项目时，我将我的上下文分为三个单独的文件，因此我最终得到了三个上下文提供者，首先我将所有上下文提供者一个一个地包装在我的组件周围 app.js ，但我想也许如果我将所有上下文提供程序组合在一个组件中并使用此组件来包装我的 app.js 所以我使用以下代码创建了文件

import React from "react";
import CryptoContextProvider from "./crypto-context";
import NewsContextProvider from "./news-context";
import DataContextProvider from "./index-context";

const allContextProviders = (props) => {
  return (
    <>
      <CryptoContextProvider>
        <NewsContextProvider>
          <DataContextProvider>{props.children}</DataContextProvider>
        </NewsContextProvider>
      </CryptoContextProvider>
    </>
  );
};

export default allContextProviders;

然后我将 app.js 包装如下

import allContextProviders from "./store/allContextProviders";

function App() {
  return (
    <allContextProviders>
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/" element={<Navigate to="/welcome" />} />
          <Route path="/welcome" element={<Home />} />
          <Route path="/marketplace" element={<Marketplace />} />
          <Route path="/tools" element={<ToolsServices />} />

然而，当我尝试用 allContextProviders 组件包装我的 app.js 时，出现以下错误

Line 12:8:  'allContextProviders' is defined but never used  no-unused-vars

我是不是做错了什么？感谢您的反馈

Answer 1

在React中告诉它变量名是Component（请评价），Component的名字要以大写字母开头，比如AllContextProvider。请更改它的名称，以便 React 知道它会在运行时间内对其进行评估。

组合 useContext 提供者

Combining useContext Providers

reactjs

import

use-context