Javascript 在React上返回Null的DOM元素 [编辑]已修复（滚动到底部）

嗨，我正在尝试为功能组件选择一个react元素，当前代码：

const Emoji = (props) => {

  const copyButton = useRef(null);

  function handleHover(e) {
    console.log(this.copyButton); //want to select this element
  }

  function handleMouseOut(e) {

  }

  return(
    <div className="wrapper">
      <div id={"emoji-"+props.id} className="emoji" onMouseOver={handleHover} onMouseOut={handleMouseOut}>
        <Button ref={copyButton} className="copyButton" buttonText="Copy" buttonColour="primary" />
        <Button className="button" buttonText="Information" buttonColour=" " />
        <h1>{props.emojiCharacter}</h1>
        <p>{props.emojiName}</p>
      </div>
    </div>
  );
}

export default Emoji;

---

这篇文章做到了

你需要使用

copyButton.current

来选择你的

ref={copyButton}

按钮

useRef钩子是一个函数，它返回一个可变的ref对象，其 .current属性已使用传递的参数初始化 （initialValue。）返回的对象将在组件的整个生命周期内保持

---

copyButton

在第一个渲染周期中不会准备好，您需要在调用它之前进行测试，并且您需要使用

copyButton.current

const handleMousehover =() =>{
  if(copyButton && copyButton.current){
   // add your code here
  }
}

---

您不需要测试悬停是否从您使用的位置提交，但如果它是从其他地方提交的，则它不会为null（或由于某种原因变为null），因此始终测试它是一个很好的做法。

这看起来像一个函数组件，而不是一个类组件，因此，您不会使用

this

关键字。您是否尝试过

console.log（copyButton）

？这看起来像一个功能组件，所以你不应该这样做。copyButton，只是copyButton请检查这个问题，为什么你认为按钮在初始渲染时不会准备好？它是一个功能组件，“function”将第一次运行以计算它应该显示的内容，代码将在返回dom的“return”之前运行，这意味着您不能在第一个循环中使用

copyButton

，因为它将为null no my friend。对于功能部件，这是不正确的。我每天都使用useRef:）在声明useState（）之前，试着做一个小测试，创建一个功能组件，并在顶部使用console.log（），看看它是否被呈现。。。还有一件事提问者说他们想要这个效果：）希望澄清疑问：）最好的愿望我会更新我的答案它仍然返回null，我想问题是因为它是一个自定义组件而不是默认的HTML元素，有没有办法解决这个问题？嗨，谢谢你的回答，它似乎仍然返回null://，有什么想法吗？我认为问题在于它不是默认的HTML元素和自定义元素，因为当我将它添加到上面的div中时，console.log似乎可以工作。

const Emoji = (props) => {

  const copyButton = useRef(null);

  function handleHover(e) {
    console.log(copyButton.current); //want to select this element
  }

  function handleMouseOut(e) {

  }

  return(
    <div className="wrapper">
      <div id={"emoji-"+props.id} className="emoji" onMouseOver={handleHover} onMouseOut={handleMouseOut}>
        <Button ref={copyButton} className="copyButton" buttonText="Copy" buttonColour="primary" />
        <Button className="button" buttonText="Information" buttonColour=" " />
        <h1>{props.emojiCharacter}</h1>
        <p>{props.emojiName}</p>
      </div>
    </div>
  );
}

export default Emoji;

  function handleHover(e) {
    console.log(copyButton.current); 
    copyButton.current.style.display="block";
  }

const handleMousehover =() =>{
  if(copyButton && copyButton.current){
   // add your code here
  }
}