React 17 - 添加 Evergreen UI 窗格会导致错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Posted 2023-02-22

【中文标题】React 17 - 添加 Evergreen UI 窗格会导致错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

【英文标题】：React 17 - Adding Evergreen UI Pane Gives an Error: Invalid hook call. Hooks can only be called inside of the body of a function component

【发布时间】：2021-09-07 15:12:04

【问题描述】：

使用 Evergreen UI 中的 Pane 在 React 17 中出现错误 我从 evergreen-ui 导入了窗格，并在我的 react js 应用程序中使用它给了我错误。

以下是我的代码

import React from "react";
import Pane from 'evergreen-ui';

function App() 
 return (
      <div>
        <Pane
         elevation=2
         float="left"
         width=200
         height=120
         margin=24
         display="flex"
         justifyContent="center"
         alignItems="center"
         flexDirection="column"
         >
          <h3>Elevation 2</h3>
          <p>Popovers and Dropdowns</p>
         </Pane>
      </div>
    );


export default App;

【参考方案1】：

尝试编辑useTheme.js

import React,  useContext  from 'react';
import ThemeContext from './ThemeContext'

function useTheme() 
  const theme = useContext(ThemeContext );
  
  return (
    <div style= color: theme.color>Foo Bar</div>
  );


export default useTheme;

【讨论】：

错误仍然存​​在，我认为有版本冲突我会在他们的 git 上提出问题

您能在codesandbox 或其他地方演示错误吗？