反应添加 FloatingMenuButton 包解析错误：意外的令牌答案

【问题标题】：React adding FloatingMenuButton Package Parsing error: Unexpected token反应添加 FloatingMenuButton 包解析错误：意外的令牌
【发布时间】：2020-10-25 17:24:43
【问题描述】：

我是 React 新手，正在尝试从 this 包中添加浮动菜单按钮。

添加这个我得到以下错误。

解析错误：Unexpected token

我已上传代码。 https://codesandbox.io/s/adding-floatingmenu-2tfxe?file=/src/App.js

我还有另一个问题。在return() 前面加上render() {} 或只留下return() 有什么区别？

更新

我已经在代码框内更新了我的代码，我没有收到错误，在我将其复制到 VSCode 后，我收到以下错误。

【问题讨论】：

你不能在类组件中使用反应钩子。去掉 useState 钩子就可以正常工作了。

标签： javascript reactjs

【解决方案1】：

您只能在功能组件中使用反应挂钩。如果您使用类组件，则不允许使用钩子。

但是什么是 Hook？ Hooks 是让你从函数组件中“钩入”React 状态和生命周期特性的函数。 Hooks 在类中不起作用——它们让你可以在没有类的情况下使用 React。

第二题同样情况，render()在类组件中使用，在功能组件中你只使用return(>)

请阅读钩子视图：

https://reactjs.org/docs/hooks-overview.html

【讨论】：

【解决方案2】：

如果你想将 isOpen 状态初始化为 false，这里有一个最小的例子

import React, { Component } from "react";
import {
  FloatingMenu,
  MainButton,
  ChildButton,
} from "react-floating-button-menu";


export default class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isOpen: false
    }
  }

  render() {
  return (
  <FloatingMenu
    slideSpeed={500}
    direction="up"
    spacing={8}
    isOpen={this.state.isOpen}
  >
    <MainButton
      backgroundColor="black"
      onClick={() => this.setState({ open: !this.state.isOpen })}
      size={56}
    />
  </FloatingMenu>
);
  }
};

确保从顶部的“react”导入组件。当您使用您正在使用的类方法制作 React 组件时，需要 Render 方法。它是一种生命周期方法，在组件需要更新时调用。 return 语句只返回被使用的数据/JSX 元素。

如果您使用的是函数式组件，则不需要渲染方法，因为它们自己返回反应元素

【讨论】：

首先，感谢您的评论。我已经更新了我的问题，因为我遇到了一个新错误并且无法弄清楚，那里出了什么问题。