Question

我使用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文件中，但是它不起作用。我在做什么错了？

Answer 1

您的代码似乎可以正常工作，请注意如何导入上下文：

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

ReactJS挂钩：如何在两个不同的.js文件中使用context？

1 个答案: