componentDidMount调用之前参考回调

我设置一个使用内联函数定义反应ref

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

然后在componentDidMount的DOM参考未设置

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

我的理解是ref回调应该在mount期间运行，不过addi ng console.log报表显示componentDidMount被称为之前的ref回调函数。

我看过例如 this discussion在github

其他代码样本显示相同的假设，componentDidMount后应在render定义的任何ref回调被称为，它甚至stated in the conversation

所以componentDidMount是在所有ref回调已经执行完之后开除了？

是的。

我使用的反应15.4.1

别的东西，我已经试过

要验证ref函数被调用，我试着定义它的类本身

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

然后在render

<div className="drawer" ref={this.setDrawerRef}>
在这种情况下
控制台日志揭示了回调的确是被称为componentDidMount

来源

2017-05-19 quickshiftin

我可能是错的，但是当你使用render方法的箭头函数时，它会从类的外部的词法范围中捕获'this'的值。尝试摆脱你的类方法的箭头函数语法，看看它是否有帮助。 – Yoshi

这对我很好。您确定在DidMount之后引用回拨电话吗？制作2个控制台。登录这两个函数，看看哪一个是第一个 – GProst

我正在使用15.5.4 React – GProst

-2

后尝试声明类像...

class YourClass extends Component { 
    render() {...same stuff you had...} 
    componentDidMount() {...same stuff you had...} 
}

我觉得你的类定义是使用无状态组件定义并导致生命周期不能像预期的那样工作。我有点惊讶，componentDidMount（）被调用，所以我可能会误解这种情况。

来源

2017-05-19 16:50:11

的任何未定义的值我应该提到，在问题中;该组件已被声明为'class Drawer extends Component { ' – quickshiftin

啊，我实际上误读你的render（）代码作为一个组件def。我的坏。 –

在componentDidMount中，你能在浏览器DOM中找到你的ref元素（div.drawer）吗？如果没有，你不能参考。由于在另一个更大的代码中发现问题，原因可能是ref元素（div.drawer）未呈现。

来源

2017-05-28 06:49:27

我是运行到一个类似的问题，似乎没有提及'componentDidMount'中的那个DOM（即使应该有） –

@Dave Lunny：也许你可以分享一个最简单的例子与缺失的ref？ –

componentDidMount调用之前参考回调

回答

相关问题