reactjs - 箭头功能未被识别反应

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;

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

解析错误：意外的标记，预期的“...”，红色箭头指向我的箭头函数括号

Answer 1

欢迎来到 StackOverflow！

您的问题在于将React 类组件与hooks.

Hooks旨在与功能组件一起使用（看看第一个示例）。

类组件包含 的使用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 = () => {...}

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

一旦组件正常运行，您就可以在其中使用钩子，但请记住仅在最高范围内使用它。