[英]JavaScript function syntax in Next.js / JSX?
我即將制作一個 function,您可以在其中選擇尺寸。 當您僅使用 JavaScript 和 HTML 時,它可以工作。 我來自 JavaScript function 的語法是否正確? 因為我收到來自 Next.js 的錯誤。
這是我從 Next.js 收到的錯誤消息。
import React from "react";
const ChangeSize = () => {
const sizes = document.querySelectorAll(".size");
function changeSize() {
sizes.forEach((size) => size.classList.remove("active"));
this.classList.add("active");
}
sizes.forEach((size) => size.addEventListener("click", changeSize));
return (
<div className='size-container'>
<h3 className='title'>size</h3>
<div className='sizes'>
<span className='size'>7</span>
<span className='size'>8</span>
<span className='size active'>9</span>
<span className='size'>10</span>
<span className='size'>11</span>
</div>
</div>
);
};
export default ChangeSize;
通常你不會使用 JavaScript DOM API 在 React 中完成此類任務。 function 和 JSX 在 React Function 組件中類似於以下內容:
const SizeSwitcher = () => {
const [activeLink, setActiveLink] = React.useState(9); // 9 was default in example
return (
<div className='size-container'>
<h3 className='title'>size</h3>
<div className='sizes'>
<span onClick={() => setActiveLink(7)} className={`size ${activeLink === 7 ? 'active' : ''}`}>7</span>
<span onClick={() => setActiveLink(8)} className={`size ${activeLink === 8 ? 'active' : ''}`}>8</span>
<span onClick={() => setActiveLink(9)} className={`size ${activeLink === 9 ? 'active' : ''}`}>9</span>
<span onClick={() => setActiveLink(10)} className={`size ${activeLink === 10 ? 'active' : ''}`}>10</span>
<span onClick={() => setActiveLink(11)} className={`size ${activeLink === 11 ? 'active' : ''}`}>11</span>
</div>
</div>
);
};
export default SizeSwitcher;
您可以 state 向上一些 state 然后使用那一塊 state 來確定是否應該存在活動的 ZA2F2ED4F8EBC2CBBDZC21。 下一步可能是弄清楚如何減少示例中的代碼重復。 希望這可以幫助!
編輯 - 哦,是的,如果您使用的是 Next.js,您可以省略頂部的 React 導入。 這由 Next 自動處理。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.