来自单独应用程序的反应组件未集成到主应用程序中

Question

我是 React 的新手，我正在尽最大努力将应用程序组合在一起，所以我创建了两个主要部分，现在我想将它们组合起来，但我'我不太确定该怎么做。

这是我得到的错误： TypeError: Cannot read property 'openSidebar' of undefined

它指向这个组件：

// Sidebar button and opening of sidebar
// main function created to open sidebar button
import React from 'react';
import { FaBars } from 'react-icons/fa';
import { useGlobalContext } from './context';

const Home = () => { /*const data can setup data form each button under sidebar */ //<----- ERROR HERE
  const { openSidebar } = useGlobalContext();
  return (
    <main> 
      <button onClick={openSidebar} className='sidebar-toggle'>
        <FaBars />
      </button>
    </main>
  );
};

export default Home;

我通过多种方式搜索了该错误，但它们似乎都与发生错误的应用程序相关。

感谢您提供的任何帮助。 如果需要更多信息，请告诉我！

编辑：下面是处理 const opendSidebar

的组件

// context class need to be added without change,
// setting of close open sidebar
import React, { useState, useContext } from 'react';

const AppContext = React.createContext(undefined, undefined);

const AppProvider = ({ children }) => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const openSidebar = () => {
    setIsSidebarOpen(true);
  };
  const closeSidebar = () => {
    setIsSidebarOpen(false);
  };


  return (
    <AppContext.Provider
      value={{
        isSidebarOpen,
        openSidebar,
        closeSidebar,
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

export const useGlobalContext = () => {
  return useContext(AppContext);
};

export { AppContext, AppProvider };

Answer 1

正如我在评论中提到的，您似乎缺少 <AppProvider />。这为所有感兴趣的 children 进一步提供了 context 值。如果未找到上下文提供程序，将使用提供给 createContext（在您的情况下未定义）的 defaultValue。

请查看 this 示例。特别是根 App.js。你会看到类似于

的结构

<AppProvider>
  <Home />
<AppProvider />

这真的是唯一缺少的东西。

Answer 2

在 React 中，Context 用于共享全局属性——因此避免了将属性向下传递多个级别的需要。 ContextProvider 仍然需要位于组件的父层次结构中，以便深层嵌套的组件可以访问上下文属性。

在您的程序中，将“Home”组件包含在 AppProvider 中。 [ AppProvider 中的 {children} 变量将指向 'Home' 组件。]

 <AppProvider>
      <Home/>
  </AppProvider>

现在，您需要在组件内部使用上下文属性。这是通过挂钩 useContext 完成的。

  const { openSidebar } = useContext(AppContext);

子组件 (Home) 现在可以访问最近的 AppContext（您可以嵌套多个 AppProvider - 子组件将使用最近的 Context）。

[您不需要使用 GlobalContext 函数。上下文已经在您的程序中导出。在“主页”组件中使用钩子 'useContext' 并将 AppContext 作为参数传递。]

完整程序在这里 -

https://codesandbox.io/s/react-context-integration-wfup1?file=/src/App.js

来自单独应用程序的反应组件未集成到主应用程序中

React Components from Separate App not integrating into Main App

html

javascript

css

node-modules

reactjs