未识别的箭头功能反应

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 = () => {...}

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

一旦组件正常工作，就可以在其内部使用钩子，但请记住只在最高范围内使用它。