繁体   English   中英

Next.js / JSX 中的 JavaScript function 语法?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM