Next.js/JSX中的JavaScript函数语法？

我将要制作一个函数，您可以在其中选择大小。当您将JavaScript与HTML一起使用时，它就可以工作了。JavaScript函数中的语法正确吗？因为我从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;

是我从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;

从“React”导入React；
常量ChangeSize=（）=>{
const size=document.queryselectoral（“.size”）；
函数changeSize（）{
size.forEach（（size）=>size.classList.remove（“活动”）；
this.classList.add（“活动”）；
}
size.forEach（（size）=>size.addEventListener（“单击”，更改大小））；
返回(
大小
7.
8.
9
10
11
);
};
导出默认的ChangeSize；

通常情况下，您不会使用JavaScript DOM API在React中完成此类任务。函数和JSX类似于React函数组件中的以下内容：

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;

const SizeSwitcher=（）=>{
const[activeLink，setActiveLink]=React.useState（9）；//9是示例中的默认值
返回(
大小
setActiveLink（7）}className={`size${activeLink===7？'active'：''}}}>7
setActiveLink（8）}className={`size${activeLink===8？'active'：''}}}>8
setActiveLink（9）}className={`size${activeLink===9？'active'：''}}}>9
setActiveLink（10）}className={`size${activeLink===10？'active'：''}}}>10
setActiveLink（11）}className={`size${activeLink===11？'active'：''}}}>11
);
};
导出默认大小开关；

您可以陈述一些状态，然后使用该状态来确定活动类是否应该存在。接下来的步骤可能是找出如何减少示例中的代码重复。希望这有帮助

---

编辑-哦，是的，如果您使用的是Next.js，您可以在顶部省去React导入。这是由Next自动处理的。

通常情况下，您不会使用JavaScript DOM API在React中完成此类任务。函数和JSX类似于React函数组件中的以下内容：

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;

const SizeSwitcher=（）=>{
const[activeLink，setActiveLink]=React.useState（9）；//9是示例中的默认值
返回(
大小
setActiveLink（7）}className={`size${activeLink===7？'active'：''}}}>7
setActiveLink（8）}className={`size${activeLink===8？'active'：''}}}>8
setActiveLink（9）}className={`size${activeLink===9？'active'：''}}}>9
setActiveLink（10）}className={`size${activeLink===10？'active'：''}}}>10
setActiveLink（11）}className={`size${activeLink===11？'active'：''}}}>11
);
};
导出默认大小开关；

您可以陈述一些状态，然后使用该状态来确定活动类是否应该存在。接下来的步骤可能是找出如何减少示例中的代码重复。希望这有帮助

---

编辑-哦，是的，如果您使用的是Next.js，您可以在顶部省去React导入。这是由Next自动处理的。

嘿，Morten，您正在使用functional react组件，因此“this”关键字可能不起作用。您可以像添加一样删除类。它应该是

size.classList.add（…）

？嘿，Morten，您正在使用functional react组件，所以“this”关键字可能不起作用。你可以像添加一样删除类。它应该是

size.classList.add（…）

？我甚至会添加一个循环，因为

span

这里重复很讨厌，我甚至会添加一个循环，因为

span

这里重复很讨厌