替代 next.js 中的文档

Question

我仍然是学习 next.js 的新手，但问题是，我不明白。 我们如何从书面 html 中调用一个元素，因为我想做下面写的代码？

HTML

<div class="container_title">
    <div class="main_title">
        <h1> Title <span>( Global )</span></h1>
        <div class="button_main_title">
            <button class="Tap_1 button" >Tap_1 </button>
            <button class="Tap_2 button">Tap_2</button>
            <button class="Tap_3 button">Tap_3</button>
            <button class="Tap_4 button">Tap_4</button>
            <button class="Tap_5 button">Tap_5</button>
        </div>
    </div>
</div>

javascript

const main_title = document.querySelector(".main_title");
const button_main_title = document.querySelectorAll(".main_title button");

(() => {
  main_title.addEventListener('click', event => {
       if(event.target.classList.contains("button")){
          for(i=0;i<button_main_title.length;i++) button_main_title[i].classList.remove("active");    
         event.target.classList.add("active")  
        }
    })
})();
const Firsr_BTN = document.querySelector(".button_main_title .button:first-child");
Firsr_BTN.click();

Answer 1

NextJS 是一个基于 React 的框架，它基于 Javascript。 但是，我知道select元素的唯一方法是使用名为useRef的 React 钩子。 让我给你举个例子。

import React, { useRef } from 'react'

const YourComponent = () => {
    const myHeading = useRef()
    console.log('heading', myHeading)

  return (
   <div>
     <h1 ref={myHeading}>Heading</h1>
   </div>
  )

}

现在你有你的h1作为myHeading并且你可以按照你想要的方式修改它。 始终检查您的控制台以了解 object 的元素是什么以及如何编辑它。