如何在React中修改属性？原生JS导航逻辑转React实现求助

你的问题在于直接操作DOM属性，违背了React状态驱动的核心逻辑，且未同步所有需要data-nav的元素状态，也没实现切换逻辑。以下是符合React规范的解决方案：

完整React组件实现 #

import { useState, useEffect } from 'react';

const HeroSection = () => {
  // 初始化导航状态，对应原HTML的data-nav="true"
  const [isNavOpen, setIsNavOpen] = useState(true);

  // 同步document.body的data-nav属性（匹配原生逻辑）
  useEffect(() => {
    document.body.dataset.nav = isNavOpen.toString();
  }, [isNavOpen]);

  // 切换导航状态
  const toggleNav = () => {
    setIsNavOpen(prevState => !prevState);
  };

  return (
    <div className='hero' data-nav={isNavOpen}>
      <main></main>

      <header data-nav={isNavOpen}>
        <nav>
          <div id="nav-links">
            <a className="nav-link" href="#">
              <h2 className="nav-link-label rubik-font">Home</h2>
              <img className="nav-link-image" src="https://images.unsplash.com/photo-1666091863721-54331a5db52d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
            </a>
            <a className="nav-link" href="#">
              <h2 className="nav-link-label rubik-font">Work</h2>
              <img className="nav-link-image" src="https://images.unsplash.com/photo-1666055642230-1595470b98fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=995&q=80" />
            </a>
            <a className="nav-link" href="#">
              <h2 className="nav-link-label rubik-font">About</h2>
              <img className="nav-link-image" src="https://images.unsplash.com/photo-1666005487638-61f45819c975?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
            </a>
            <a className="nav-link" href="#">
              <h2 className="nav-link-label rubik-font">Contact</h2>
              <img className="nav-link-image" src="https://images.unsplash.com/photo-1665910407771-bc84ad45676b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80" />
            </a>
            <a className="nav-link" href="#">
              <h2 className="nav-link-label rubik-font">Join Us</h2>
              <img className="nav-link-image" src="https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
            </a>
          </div>
        </nav>
      </header>

      <button id="nav-toggle" type="button" onClick={toggleNav}>
        <i className="open fa-light fa-bars-staggered"></i>
        <i className="close fa-light fa-xmark-large"></i>
      </button>
    </div>
  );
};

export default HeroSection;

核心说明 #

1. 状态管理：用useState创建isNavOpen状态变量，替代原生DOM的data属性操作，确保状态唯一可信。
2. 属性绑定：所有需要data-nav的元素（.hero、header）通过data-nav={isNavOpen}绑定状态，React会自动将布尔值转为"true"/"false"字符串，匹配CSS选择器要求。
3. 同步body状态：通过useEffect监听isNavOpen变化，同步更新document.body.dataset.nav，完全对齐原生逻辑。
4. 切换逻辑：toggleNav通过反转状态值实现切换，无需直接操作DOM，符合React数据流。

为何原写法无效 #

• 直接操作event.target会因点击目标（如按钮内的<i>标签）不准确导致修改错误元素。
• 仅设置为false未实现切换逻辑，且未同步所有需要data-nav的元素，状态与DOM脱节。

内容的提问来源于stack exchange，提问作者VladosNinja