有没有办法在 React 中定义一个可以在整个组件中使用的元素？

Question

For example I have the following component:

import React from 'react'

export default function App() {
  function handleOver() {
    const target = document.getElementById("target")
    target.style.background = "red"
  }

  function handleLeave() {
    const target = document.getElementById("target")
    target.style.background = "green"
  }
  
  return (
    <div>
      <div
        id="btn"
        onMouseOver={handleOver}
        onMouseLeave={handleLeave}>
          Test
      </div>
      <div
        id="target">
      </div>
    </div>
  )
}

Instead of defining target twice, can I define it once and call it from each event?

Answer 1

You can useRef , but also check recommended approach in second code snippet .

import React from 'react'

export default function App() {
  const target = useRef();

  function handleOver() {
    target.current.style.background = "red"
  }

  function handleLeave() {
    target.current.style.background = "green"
  }
  
  return (
    <div>
      <div
        id="btn"
        onMouseOver={handleOver}
        onMouseLeave={handleLeave}>
          Test
      </div>
      <div
         ref={target}>
      </div>
    </div>
  )
}

---

But probably it's better not to manipulate the DOM like that yourself , instead define some backgroundColor state variable with useState and use style binding like <div style={{backgrondColor: myColorInState}}></div> or assign a custom CSS class with these colors:

export default function App() {
  const [targetColor, setTargetColor] = useState(null);

  function handleOver() {
    setTargetColor("red");
  }

  function handleLeave() {
    setTargetColor("green");
  }
  
  return (
    <div>
      <div
        id="btn"
        onMouseOver={handleOver}
        onMouseLeave={handleLeave}>
          Test
      </div>
      <div style={{background: targetColor}}></div>
    </div>
  )
}