时间戳

首页 > 解决方案 > ReactJS 钩子：如何在两个不同的 .js 文件中使用上下文？

reactjs - ReactJS 钩子：如何在两个不同的 .js 文件中使用上下文？

问题描述

我使用 React.createContext() 和 React.useContext() 在同一个 .js 文件中有两个组件。现在我想将 Menu 组件移动到另一个 .js 文件中，但我在使用相同的上下文时遇到了问题。这是代码：

const ManagerContext = React.createContext(null);

export default function LessonManager() {

const [title, setTitle] = React.useState('SomeOtherTitle');
const [editing, toggleEditor] = React.useState(false);

const value = React.useMemo(() => {
  return {
    title,
    setTitle,
    editing,
    toggleEditor,
    log: (t) => console.log(t)
  }
}, [title, editing]);

return (
  <ManagerContext.Provider value={value}>

    <div className='box-default expand'>

      <div className='handle' style={{display: 'flex', justifyContent: 'center', width: '100%', cursor: 'grab'}}>

          <LessonMenu/>

      </div>

    </div>

  </ManagerContext.Provider>
)
}

export function LessonMenu() {

  const state = React.useContext(ManagerContext);

  return (
      <ButtonGroup size='sm'>
          <IconButton
              className='rsuite-btn menu-button'
              onClick={()=>state.toggleEditor(!state.editing)}
              icon={ <Icon icon={state.editing ? ('eye') : ('edit2')} />} />
      </ButtonGroup>
  )
}

我试图导出 const ManagerContext：

export const ManagerContext = React.createContext(null);

并将其导入我使用 Menu 组件创建的 Menu.js 文件中，但它不起作用。我究竟做错了什么？

标签： reactjsreact-hooks

解决方案

您的代码似乎有效，请注意您需要如何导入上下文：

// export const ManagerContext = React.createContext(null);

import { ManagerContext } from "./Menu.js";

export function LessonMenu() {
  const { toggleEditor, editing } = React.useContext(ManagerContext);

  return (
    <ButtonGroup size="sm">
      <IconButton
        className="rsuite-btn menu-button"
        onClick={() => toggleEditor(!editing)}
        icon={<Icon icon={toggleEditor ? "eye" : "edit2"} />}
      />
    </ButtonGroup>
  );
}

推荐阅读