reactjs - userRef 或 createRef 在功能组件中返回未定义

Question

我在这里阅读了很多答案，但所有答案都是针对类组件的。

如果我有使用 useRef 或 createRef 的简单功能组件，ref.current 是未定义的我将它分配到 div 或 input 之上，但我无法获得它们的任何属性

Console.log() 仅在我使用独立 console.log(ref) 时给我数据每个其他属性都是未定义的，例如控制台日志(引用当前)

import React, { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const ref = useRef()
  console.log(ref.current) // undefined
  console.log(ref) // { current }

  return ( 
    <div className="App">
      <h1 ref={ref}>Hello CodeSandbox</h1>      
      {/* <input ref={ref} name="test" value="bla" /> */}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

看看这个演示，看看控制台: https://codesandbox.io/s/fervent-kirch-soe8n

但即使在类组件中我也无法访问例如 ref.current.innerHTML: https://codesandbox.io/s/relaxed-beaver-ic1em

Answer 1

好的，我已经找到问题所在了。

如果我使用 useEffect() 或者如果我使用一些按钮处理程序，我可以访问元素:

useEffect(()=>{
    console.log(ref.current.innerHTML)
  })

类组件相同:

class App extends React.Component {
  myRef = React.createRef();

  componentDidMount(){
    console.log(this.myRef.current); // correct
  }

  render() {
    console.log(this.myRef.current); // null

    return <h2 ref={this.myRef}>Start editing to see some magic happen!</h2>
  }
}

或

<button onClick={()=> console.log(ref.current.innerHTML)}>Click</button>