替代 next.js 中的文档

Question

I'm still new to learning next.js, but the problem is, I don't understand. How do we call an element from the written html because I want to do like the code written below?

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 is a framework which is based on React, which is based on Javascript. However, the only way that I know to select an element is to use a React hook called useRef . Let me give you an example.

import React, { useRef } from 'react'

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

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

}

Now you have your h1 as myHeading and you can modify it the way you want. Always check your console for what's the element object looks like and how to edit it.