箭头功能未被识别反应

Question

import React, {
  useState
} from 'react';
import Modal from 'react-modal';
import './testmodal.css';


class Testmodal extends React.Component {
  render() {
    const [modalIsOpen, setModalIsOpen] = useState(false)
    return ( <
      div className = "Testmodal" >
      <
      div >
      <
      button onClick {
        () => setModalIsOpen(true)
      } > Edit Profile < /button> <
      /div> <
      Modal isOpen = {
        modalIsOpen
      } >
      <
      h2 > Modal Type < /h2> <
      p > Modal body < /p> <
      div >
      <
      button onClick = {
        () => setModalIsOpen(false)
      } > < /button> <
      /div> <
      /Modal> <
      /div>
    )
  }
}

export default Testmodal;

我正在尝试制作一个模态组件，该组件可以导出到我正在创建的网站上，但由于某种原因，当我运行本地计算机上的文件时，它在箭头处发现错误功能。

Parsing error: Unexpected token, expected "..." with a red arrow pointing at my arrow function brackets

Answer 1

欢迎使用 Whosebug！

您的问题在于将 React Class Component 与 hooks 一起使用。

Hooks 旨在与 functional components 一起使用（请看第一个示例）。

Class 组件包含 this.state 的用法，而功能组件则像您一样包含 useState, useX, useY（挂钩）的用法。

看看这个固定的代码：

import React, { useState } from 'react';
import Modal from 'react-modal';
import './testmodal.css';

const Testmodal = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  return (
    <div className="Testmodal">
      <div>
        <button onClick={() => setModalIsOpen(true)}> Edit Profile </button>
      </div>
      <Modal isOpen={modalIsOpen}>
        <h2> Modal Type </h2> <p> Modal body </p>
        <div>
          <button onClick={() => setModalIsOpen(false)}> </button>
        </div>
      </Modal>
    </div>
  );
};

export default Testmodal;

我更改的是将组件从 Class Testmodal extends React.Component 迁移到 const Testmodal = () => {...}

这称为从 Class 组件迁移到功能组件。

组件正常运行后，您可以在其中使用钩子，但请记住仅在 highest scope.

中使用它

箭头功能未被识别反应

Arrow function not being recognized react

reactjs

arrow-functions

parsing-error