因为您忘记将 ref 分配给某个 dom 元素。你只是在创造它。

像这样写：

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.test = React.createRef();
  }

  handleClick = () => alert(this.test.current.value)

  render() {
    return (
      <div className="App">
        <input ref={this.test} />
        <button onClick={this.handleClick}>Get Value</button>
      </div>
    )
  }
}

工作示例。

我知道这不是 OP 问题的解决方案，但对于那些来自谷歌搜索的人来说，ref.current 可以为 null 的方法之一是，如果附加 ref 的组件是连接组件。就像 react-redux connect 或 withRouter 一样。对于 react-redux，解决方案是在第四个选项中传递 forwardRef:true 以进行连接。

React.createRef() 是异步的，因此如果您尝试访问 componentDidMount 中的 ref，它将返回 null，然后返回您正在引用的组件的属性。

componentDidMount(): void {
      if (this.viewShot && this.viewShot.current) {
          this.viewShot.current.capture().then((uri) => {
        console.log('do something with ', uri);
          });
      }
  }

这是在这种情况下使用 React.createRef() 的正确方法。

你缺少ref={this.test}props。

return (
  <div className="App" ref={this.test}>
    current value : {this.test.current + ""}
  </div>
);