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

Question

我是React的新手，正在尝试从this软件包中添加Floating Menu Button。

添加此内容后，我会收到错误消息。

分析错误：意外的令牌

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

我还有一个问题。在render() {}前面添加return()或仅离开return()有什么区别？

更新

我已在codeandbox中更新了我的代码，在将其复制到VSCode后，我没有收到错误。

Answer 1

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

但是什么是挂钩？ 挂钩是使您能够“挂钩”功能组件中的React状态和生命周期功能的函数。钩子在类内部不起作用-它们使您可以在没有类的情况下使用React。

1. 第二个问题是相同的情况，render（）在类组件中使用，在功能组件中您仅使用return（<> ）

请阅读钩子owerview：

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

Answer 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组件时，需要使用Render方法。这是一种生命周期方法，当组件需要更新时会被调用。 return语句仅返回data / JSX元素正在使用的任何位置。

如果您使用的是功能组件，则不需要render方法，因为它们会自己返回react元素