Question

我正在尝试做this。

我必须丢失一些东西，但是我不明白为什么在这个示例中current总是null。

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.test = React.createRef();
  }
  render() {
    return <div className="App">current value : {this.test.current + ""}</div>;
  }
}

您可以检查我的测试用例here

Answer 1

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

这样写：

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

Working Example.

Answer 2

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

Answer 3

您缺少.dockerignore道具。

ref={this.test}

Answer 4

这可能发生在以下情况：

您忘记将您的 ref 传递给组件，即问题中的 this.test。

<块引用>

<Component ref={this.test} />

您正在使用 Redux，其中 ref props 传递到的组件由 connect 方法包装，因此 this.test.current 将返回 < em>null 因为它指向 Redux 包装器，使这种组件工作 make forwardRef: true

<块引用>

即：connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})(Component)

如果您同时使用 withRouter 和 connect，那么这里将使用两个 包装器而不是一个而 this.test.current 显然会返回 null，为了克服这个问题，请确保 withRouter 包装 connect

<块引用>

withRouter(connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})(Component))

然后

<块引用>

<Component wrappedComponentRef={ref => this.test = ref} />

wrappedComponentRef 是一个 prop，用于使封装的组件像 forwardRef: true 一样可用，您可以在文档 here

中找到它

Answer 5

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（）的正确方法。

Answer 6

<div ref={this.test}>

您必须将ref属性分配给DOM元素。在这种情况下，您必须将ref分配给div元素

Answer 7

早在 2021/11 年，react 就特别更新了 17.0.2 版，为了理解 refs，我们不需要羡慕它是异步的事实所以做这样的事情是行不通的

import {useRef} from 'react';
import './kind.css'

const Kind = ({prop}) => {

    // defining the ref
    const kindRef = useRef('')
    
    // print the ref to the console
    console.log(kindRef)


    return (
    <div ref={kindRef} className="kind-container" >
        <div className="kind" data-kind='drink'>Drink</div>
        <div className="kind" data-kind='sweet'>Sweet</div>
        <div className="kind" data-kind='lorem'>lorem</div>
        <div className="kind" data-kind='ipsum'>ipsum</div>
        <div className="kind" data-kind='ipsum' >food</div>
    </div>
    );
}

export default Kind;

因为在初始化 ref 后需要一些时间将它分配给 dom，它只是不等待分配并且只是 console.log 没有任何值的 ref 所以这就是它不打印任何东西的原因

所以要解决这个问题，我们需要使用'useEffec' 像这样

import { useRef, useEffect} from 'react';
import './kind.css'

const Kind = ({prop}) => {

    // defining the ref
    const kindRef = useRef('')
    
    // using 'useEffect' will help us to do what ever you want to your ref varaible,
    // by waiting to letting the elements to mount:'mount means after the elements get inserted in the page' and then do what you want the ref
    useEffect(()=>{

        // print the ref to the console
        console.log(kindRef)        

    })


    return (
    <div ref={kindRef} className="kind-container" >
        <div className="kind" data-kind='drink'>Drink</div>
        <div className="kind" data-kind='sweet'>Sweet</div>
        <div className="kind" data-kind='lorem'>lorem</div>
        <div className="kind" data-kind='ipsum'>ipsum</div>
        <div className="kind" data-kind='ipsum' >food</div>
    </div>
    );
}

export default Kind;

那么'useEffect' 会等待将 ref 分配给 dom 元素，然后执行您想要的操作

所以摘要：使用 'useEffect' 对 refs 执行任何操作，因为 useRef 是异步的

希望这有助于它振作起来

Ammar Yasser

使用React.createRef时current始终为null

7 个答案: