Javascript TypeError:react\uuu网页包\u导入的\u模块\uu 6\uuuuuu默认值.a.useState不是函数

下面我提供了我的ReactJS代码的简化草图（基于）。这段代码没有编译，因为我可能在错误的位置添加了

函数handleClickOpen（）

和

函数handleClose（）

。 我怎样才能修好它

具体而言，以下是错误消息：

TypeError:react\u网页包\u导入的\u模块\u 6\u默认值为a.useState 不是功能

import React，{Component，Fragment}来自'React'；
从“@material ui/core/Slide”导入幻灯片；
常量转换=React.forwardRef（函数转换（props，ref）{
回来
});
类控件扩展组件{
render（）{
const[open，setOpen]=React.useState（false）；
函数handleClickOpen（）{
setOpen（真）；
}
函数handleClose（）{
setOpen（假）；
}
返回(
# ...
);
}
}
出口管制；

根据React文档，我们不能在基于类的组件中使用钩子，请参见下面的url

像

useState

这样的钩子只用于功能组件

它们应该在渲染函数之外调用

React和React dom需要是16.8版或更高版本

import React，{useState，Fragment}来自“React”；
从“@material ui/core/Slide”导入幻灯片；
常量转换=React.forwardRef（函数转换（props，ref）{
回来
});
功能控制（道具）{
const[open，setOpen]=React.useState（false）；
函数handleClickOpen（）{setOpen（true）；}
函数handleClose（）{setOpen（false）；}
返回(
//随便
)
}
出口管制；

我尝试按照您的建议将

底部控件更改为
功能。仍然会出现相同的错误。那么，您是否检查了
react
和
react dom
的版本是否为16.8或更高版本？我该怎么做？我试图运行
npm ls react dom-g
。它返回：
/usr/local/lib└── （空）
您可以检查我检查的版本。是16.7.0。我应该如何更新它？对于
16.7.0
，有什么解决方案吗？
import React, { Component, Fragment } from 'react';
import Slide from '@material-ui/core/Slide';


const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});


class BottomControls extends Component {
    render() {

        const [open, setOpen] = React.useState(false);

        function handleClickOpen() {
          setOpen(true);
        }

        function handleClose() {
          setOpen(false);
        }

        return (
          <Fragment>
             # ...
          </Fragment>
        );
    }
}

export default BottomControls;

import React, { useState, Fragment } from 'react';
import Slide from '@material-ui/core/Slide';


const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});


function BottomControls(props) {
  const [open, setOpen] = React.useState(false);
  function handleClickOpen() { setOpen(true); }
  function handleClose() { setOpen(false); }
  return (
    <Fragment>
      // whatever
    </Fragment>
  )
}

export default BottomControls;