componentDidMount在引用回调之前被调用

JavaScript

猪猪飞云

2020-03-14

问题

我正在ref使用内联函数定义设置反应

render = () => {
    return (
        <div className="drawer" ref={drawer => this.drawerRef = drawer}>

然后在componentDidMountDOM引用中未设置

componentDidMount = () => {
    // this.drawerRef is not defined

我的理解是,ref回调应该在安装期间运行,但是在ref回调函数之前调用添加console.log语句揭示componentDidMount

我看过的其他代码示例(例如,在github上的讨论)表明了相同的假设,componentDidMount应在中定义的任何回调之后ref调用render,甚至在对话中也要说明

那么在所有的ref回调都执行完之后,componentDidMount是否被触发?

是。

我正在使用反应15.4.1

我尝试过的其他事情

To verify the ref function was being called, I tried defining it on the class as such

setDrawerRef = (drawer) => {
  this.drawerRef = drawer;
}

then in render

<div className="drawer" ref={this.setDrawerRef}>

Console logging in this case reveals the callback is indeed being called after componentDidMount

第1600篇《componentDidMount在引用回调之前被调用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小宇宙 2020.03.14

在componentDidMount中,可以在浏览器DOM中找到ref元素(div.drawer)吗?如果没有,您将无法获得其参考。由于问题是在另一个更大的代码中找到的,原因可能是未呈现ref元素(div.drawer)。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android