有沒有辦法在 React 中定義一個可以在整個組件中使用的元素？

Question

例如，我有以下組件：

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>
  )
}

除了定義目標兩次，我可以定義一次並從每個事件中調用它嗎？

Answer 1

您可以useRef ，也可以在第二個代碼片段中查看推薦的方法。

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>
  )
}