你可以在 Gatsby.js (JSX) 中的元素上使用 ID 吗？

Question

我正在使用 Gatsby.js 构建导航栏组件。我添加了一个输入和相应的标签，它引发了下图所示的错误：

import React from 'react'
import { Link } from 'gatsby'
import * as styles from "../styles/navbar.module.scss" 

   const Navbar = () => {
      return (
    
        <input type="checkbox" id="menu">
        <label for="menu" onclick></label>
    
        <nav role="off-canvas">
          <ul className={styles.navbar}>
            <li><Link to="/page-1">Page 1</Link></li>
            <li><Link to="/page-2">Page 2</Link></li>
            <li><Link to="/page-3">Page 3</Link></li>
          </ul>
        </nav>
      )
    }

export default Navbar

我认为错误与标签和输入标签中的 ID 使用有关。

Answer 1

你在上面代码片段中的问题是你的 Navbar 返回的 JSX 结构没有被任何东西包裹（即使你有一个未关闭的 input 标签）。在您的元素上使用 ids 是完全有效的，与使用它无关。

只需使用：

   const Navbar = () => {
      return (
        <>
        <input type="checkbox" id="menu" />
        <label for="menu" onclick></label>
    
        <nav role="off-canvas">
          <ul className={styles.navbar}>
            <li><Link to="/page-1">Page 1</Link></li>
            <li><Link to="/page-2">Page 2</Link></li>
            <li><Link to="/page-3">Page 3</Link></li>
          </ul>
        </nav>
       </>
      )
    }

<> 是 <React.Fragment> 的 React 片段 shorthand，它们允许您在不修改 DOM 结构的情况下包装 children。更多详情：https://reactjs.org/docs/fragments.html

你可以在 Gatsby.js (JSX) 中的元素上使用 ID 吗？

Can you use ID on elements in Gatsby.js (JSX)?

jsx

gatsby