componentDidMount在引用回调之前被调用

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

然后在componentDidMountDOM引用中未设置

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

我的理解是，ref回调应该在安装期间运行，但是在ref回调函数 *

例如，我看过的其他代码示例在github上的讨论都表明相同的假设，componentDidMount应该在中定义的任何回调

ref调用render，甚至在对话中也要说明

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

是。

我正在使用反应 15.4.1

为了验证该ref函数是否已被调用，我尝试在此类上定义它

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

然后在 render

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

在这种情况下，控制台日志记录显示确实在 *componentDidMount

回答：

简短答案：

。

componentDidMount() {
  // can use any refs here
}
componentDidUpdate() {
  // can use any refs here
}
render() {
  // as long as those refs were rendered!
  return <div ref={/* ... */} />;
}

请注意，这并不意味着“ React总是在运行这些挂钩之前设置 所有 引用”。

让我们看一些 没有 设置参考的示例。

引用未设置未渲染的元素

React只会为您实际 元素调用ref回调。

这意味着如果您的代码看起来像

render() {
  if (this.state.isLoading) {
    return <h1>Loading</h1>;
  }
  return <div ref={this._setRef} />;
}

并初步this.state.isLoading是true，你应该

希望this._setRef之前调用componentDidMount。

这应该是有道理的：如果您的第一个渲染器返回了<h1>Loading</h1>，React无法知道在其他条件下它会返回需要附加引用的其他内容。也

<div>元素未创建，因为render()方法表示不应渲染该元素。

因此，在此示例中，只会componentDidMount触发。但是，对

，您将this._setRef首先看到附件，然后componentDidUpdate将其触发。

提防其他组件

请注意， ，则它们可能会执行某些阻止渲染的操作（并导致问题）。

例如，这：

<MyPanel>
  <div ref={this.setRef} />
</MyPanel>

如果其输出中MyPanel未包含以下内容props.children，则将不起作用：

function MyPanel(props) {
  // ignore props.children
  return <h1>Oops, no refs for you today!</h1>;
}

再说一次，这不是一个错误： 。

如果将引用传递给嵌套，则它们不会在生命周期之前设置 ReactDOM.render()

与上一节类似，如果将带有ref的孩子传递到另一个组件，则此组件可能会执行某些阻止及时附加ref的操作。

例如，也许不是从中返回子项render()，而是调用ReactDOM.render()了生命周期挂钩。您可以在这里找到一个示例。在该示例中，我们呈现：

<MyModal>
  <div ref={this.setRef} />
</MyModal>

但是在 其 生命周期方法中MyModal执行ReactDOM.render()调用： __componentDidUpdate

componentDidUpdate() {
  ReactDOM.render(this.props.children, this.targetEl);
}
render() {
  return null;
}

从React 16开始， 此类 。这可以解释为什么您没有及时看到引用。

render() {
  return ReactDOM.createPortal(this.props.children, this.targetEl);
}

这样<div>，带有ref的我们实际上包含在渲染输出中。

因此，如果遇到此问题，则需要验证组件和ref之间没有任何东西可能会延迟渲染子级。

不要setState用来存储裁判

确保您setState不习惯将ref存储在ref回调中，因为它是异步的，并且在“完成”之前componentDidMount将首先执行。

还是一个问题？

如果以上提示均无济于事，请在React中提出问题，我们将进行调查。

以上是 componentDidMount在引用回调之前被调用 的全部内容， 来源链接： utcz.com/qa/414254.html

回到顶部