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

Posted

技术标签:

【中文标题】Next.js / JSX 中的 JavaScript 函数语法?【英文标题】:JavaScript function syntax in Next.js / JSX? 【发布时间】:2020-09-06 16:23:36 【问题描述】:

我即将创建一个可以选择尺寸的功能。当您仅将 javascripthtml 一起使用时,它就可以工作。我的 JavaScript 函数语法是否正确?因为我从 Next.js 收到一个错误。

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

【问题讨论】:

嘿 Morten,您正在使用功能性反应组件,因此“this”关键字可能不起作用。您可以像添加一样删除类。 应该是size.classList.add(...) 【参考方案1】:

通常您不会使用 JavaScript DOM API 在 React 中完成此类任务。函数和 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;

您可以声明一些状态,然后使用该状态来确定活动类是否应该存在。下一步可能是弄清楚如何减少示例中的代码重复。希望这会有所帮助!

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

【讨论】:

我什至会添加一个循环,因为span 重复在这里很讨厌

以上是关于Next.js / JSX 中的 JavaScript 函数语法?的主要内容,如果未能解决你的问题,请参考以下文章

Next.js 不加载 jsx

JSX 在纯 JavaScript 文件中工作,如何?

在 Next.js 中为 styled-jsx 动态添加样式

Next.js:如何在特定页面上更改根 div __next 的 css?

React / JSX:渲染的 <script> 标记将等号和引号添加到异步属性

P07:使用Style JSX编写页面的CSS样式