javascript - 使用 Refs 设置 div 元素的样式

Question

再会，

我是反应 JS 的新手，我想使用 refs 获取一个 div 元素并设置它的样式。它给出了一个错误（无法读取未定义的属性样式）。

import React, { useState, useRef } from 'react'

function Menubar() {
  const [show, setshow] = useState(false)
  const clickref = useRef()
  const openMenu = () => {
    if (show === false) {
      clickref.current.style.display = "block";
      setshow(true);
    }
    clickref.current.style.display = "none";
    setshow(false);
  }
  return (
    <div className="menu">
      <div className="menuBar">
        <div className="navBar ">
          <img src={Drop} alt="DrpBtn" className="drpBtn" onClick={openMenu()} />
          <ul className="navCon" ref={clickref}>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/menu">Menu</Link></li>
            <li><Link to="/news">News</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact Us</Link></li>
            <li><Link to="/patner">Patner</Link></li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default Menubar

标签： javascriptreactjsdom

Answer 1

由于您是新来的反应，我会说您在这里滥用 refs。使用您已经必须执行逻辑的状态值，例如：

import React, { useState } from 'react'
import { Link } from 'react-router-dom';

function Menubar() {
  const [show, setShow] = useState(false);

  const toggleMenu = () => {
    // toggle the current state
    setShow(current => !current);
  };

  return (
    <div className="menu">
      <div className="menuBar">
        <div className="navBar ">
          <button onClick={toggleMenu}>toggle</button>

          {/*use show to handle the styling*/}
          <ul className="navCon" style={{display: show ? 'block' : 'none'}}>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/menu">Menu</Link></li>
            <li><Link to="/news">News</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact Us</Link></li>
            <li><Link to="/patner">Patner</Link></li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default Menubar;