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

例如，我有以下组件：

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

从“React”导入React
导出默认函数App（）{
函数handleOver（）{
const target=document.getElementById（“目标”）
target.style.background=“红色”
}
函数handleLeave（）{
const target=document.getElementById（“目标”）
target.style.background=“绿色”
}
返回(
试验
)
}

---

我可以不定义两次目标，而是定义一次并从每个事件调用它吗？

您可以

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

---

您可以

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

---

您是否也需要检查

target.current

是否也未定义？当您触发

mouseOver

和

mouseLeave

时，ref将被绑定，因此不为null。如果在组件初始化时使用它，则会出现问题，因为组件需要至少渲染一次才能将元素绑定到ref。但也请检查我答案的结尾，我不建议在这种简单的情况下操作DOM。您是否也需要检查

target.current

是否也未定义？当您触发

mouseOver

和

mouseLeave

时，ref将被绑定，因此不为null。如果在组件初始化时使用它，则会出现问题，因为组件需要至少渲染一次才能将元素绑定到ref。但是也请检查我的答案的结尾，我不建议在这种简单的情况下操作DOM。