如何将Vanilla JS转换为React JS

Question

我是react的新手，我有这个香草JS，但在react中它不起作用

你能告诉我如何在react中工作吗

document.querySelector(".img__btn").addEventListener("click", function () {
document.querySelector(".cont.").classList.toggle("s--signup");
});

我试过这个作为香草JS应该在react中工作，但它不是它显示addeventlistener错误

Answer 1

在React中直接翻译成这样的组件

import { useState } from "react";
const App = () => {
const [isSignupVisible, setIsSignupVisible] = useState(false); // false is default value

return (
<>
<button onClick={() => setIsSignupVisible((prev) => !prev)}>Toggle isSignupVisible</button>
<div class={isSignupVisible ? "s--signup" : ""}>
<p>Idk what you want here</p>
</div>
</>
);
};

使用React，你应该很少(如果有的话)手动添加事件监听器，使用查询选择器，或者像你那样切换类。