在React中创建汉堡菜单

Question

在React中创建汉堡菜单

3

希望这是一个真正简单的问题，但我很难理解为什么有那么复杂的答案。我目前正在将一个网站从普通HTML/CSS/JS转换到React。在其中，你有一个外部的Vanilla JS文件，其中包含使汉堡菜单打开和关闭所需的代码。

就像这样：

// Variables

let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");


// Function

function hamburgerActive() {
  line1.classList.toggle("active");
  line2.classList.toggle("active");
  navList.classList.toggle("active");
}

// Event Listener

hamburger.addEventListener("click", hamburgerActive);

现在，我已经使用React渲染了头部，其中包含汉堡菜单。这些内容存储在一个index.js文件中，使用一个单独的组件从“Header.js”文件中导入并渲染。

我该如何将原始的JS代码转移到我的Header组件中？最好的方法是在Header.js文件中添加一个“onclick”功能吗？

所有的替代方案都在谈论引入props、states等等——对我来说，这显得过于复杂，因为这只是一个非常简单的原始JS操作。肯定有一种简单的方法可以将代码放进去并使其正常工作吧？

供参考，以下是Header组件的现有代码：

class Header extends React.Component {

  render() {
    return (


      <header className="universal-header-section">
        <div className="universal-header-container">
          <div className="universal-header-hamburger">
            <div id="hamburger">
              <span id="hamburger-line-1" class="hamburger-span" />
              <span id="hamburger-line-2" class="hamburger-span" />
            </div>
          </div>
          <div className="universal-header-logo">
            <a href="index">
              <h2>TBC</h2>
            </a>
          </div>
          <div className="universal-header-basket">
            <a href="basket">
              <i className="fas fa-shopping-cart fa-2x"></i>
            </a>
          </div>
        </div>
        <div id="hamburger-nav-list">
          <div class="hamburger-container">

          </div>
        </div>
      </header>
    )
  }
}

有人能给些建议吗？还是我需要使用 props/state ？

谢谢。希望这一切都说得通！

- Jon Nicholson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Red Baron · Accepted Answer

你应该使用状态(state)，它是为这种情况设计的：

像这样使用一个函数组件：

const Header = () => {

   const [toggle, setToggle] = useState(true) // you could default to false

    return (
// this will toggle the state to be true/false (opposite to the previous one) then
based on that you can add certain classes to either show or hide it

      <header className="universal-header-section" onClick={() => setToggle(!toggle)}>
        <div className="universal-header-container">
          <div className="universal-header-hamburger">
            <div id="hamburger">
              <span id="hamburger-line-1" class=`hamburger-span ${toggle ? 'active' : ''} ` />
              <span id="hamburger-line-2" class=`hamburger-span ${toggle ? 'active' : ''} ` />
            </div>
          </div>
          <div className="universal-header-logo">
            <a href="index">
              <h2>TBC</h2>
            </a>
          </div>
          <div className="universal-header-basket">
            <a href="basket">
              <i className="fas fa-shopping-cart fa-2x"></i>
            </a>
          </div>
        </div>
        <div id="hamburger-nav-list">
          <div class="hamburger-container">

          </div>
        </div>
      </header>
    )
  }
}

你可以像这样添加一个新的类名：

<div className={`myClass toggle ? "active" : ''}></div>

这段代码的意思是如果 toggle 是 true，则添加 active 到该类，否则添加 ''。因此，您可以将其添加到需要在 onClick 时更改的类中。