我可以在类组件中使用useState钩子吗

Question

我正试图解决testdome上的React问题。

这就是任务：

Message组件包含一个锚点元素和位于锚点下方的一段。段落的呈现应该通过使用以下逻辑点击锚点元素来切换：

在开始时，不应呈现段落
单击后，应呈现该段落
再次单击后，不应呈现该段落
通过实现此逻辑来完成消息组件。

这就是解决方案：

// React is loaded and is available as React and ReactDOM
// imports should NOT be used
class Message extends React.Component {

constructor(props) {
super(props);
this.state = {
visible: false
};
}

clickHandler = (event) => {
event.preventDefault();
this.setState({
visible: !this.state.visible   
});
}

render() {
return (<React.Fragment>
<a onClick={this.clickHandler} href="#">Want to buy a new car?</a>
{ this.state.visible && <p>Call [phone] now!</p>}
</React.Fragment>);
}
}
document.body.innerHTML = "<div id='root'> </div>";

const rootElement = document.getElementById("root");
ReactDOM.render(<Message />, rootElement);
console.log("Before click: " + rootElement.innerHTML);
document.querySelector("a").click();
console.log("After click: " + rootElement.innerHTML);

我想对useState Hook做同样的事情。这是我的代码：

// React is loaded and is available as React and ReactDOM
// imports should NOT be used
class Message extends React.Component {

const [show, setShow] = useState(false);

const toggleVisibility = () => {
setShow(!show);
}

render() {
if(show) {
return (<React.Fragment>
<a onClick={toggleVisibility} href="#">Want to buy a new car?</a>
<p>Call [phone] now!</p>
</React.Fragment>);
} else {
return (<React.Fragment>
<a onClick={toggleVisibility} href="#">Want to buy a new car?</a>
</React.Fragment>);
}
}

}
document.body.innerHTML = "<div id='root'> </div>";

const rootElement = document.getElementById("root");
ReactDOM.render(<Message />, rootElement);
console.log("Before click: " + rootElement.innerHTML);
document.querySelector("a").click();
console.log("After click: " + rootElement.innerHTML);

这是输出：

Run OK, but 3 out of 3 test cases failed.
Line 5: SyntaxError: unknown: Unexpected token (5:8)
3 | class Message extends React.Component {
4 |   
> 5 |   const [show, setShow] = useState(false);
|         ^
6 |   
7 |   const toggleVisibility = () => {
8 |     setShow(!show);
Your score is 0% :(

为什么它不起作用？不允许在类组件中使用钩子吗？如果不可能，我如何将类组件更改为函数组件？

Answer 1

不能在基于类的组件中使用useState()挂钩。要执行此操作，请切换到基于功能的组件。

您可以创建如下所示的功能组件

import React, { useState } from "react";
import ReactDOM from "react-dom";
const Message = () => {
const [show, setShow] = useState(false);
const toggleVisibility = () => {
setShow(!show);
};
return (
<React.Fragment>
<a onClick={toggleVisibility} href="#">
Want to buy a new car?
</a>
{show && <p>Call [phone] now!</p>}
</React.Fragment>
);
};

Answer 2

不能在类组件中使用钩子，只能用于功能组件。您可以将Message组件重构为如下功能组件：

export const Message = () => {
const [show, setShow] = useState(false);
const toggleVisibility = () => {
setShow(!show);
}
if(show) {
return (
<React.Fragment>
<a onClick={toggleVisibility} href="#">Want to buy a new car?</a>
<p>Call [phone] now!</p>
</React.Fragment>
);
} else {
return (
<React.Fragment>
<a onClick={toggleVisibility} href="#">Want to buy a new car?</a>
</React.Fragment>
);
}
}