React：当组件加载完成后，如何调用函数？

Question

我正在尝试使用谷歌的模型查看器Web组件在我的网站上显示一个模型。文档中说该组件有一个“loaded”属性，它是“只读”的，并且“如果自上次src更改以来触发了加载事件，则返回true”。我正在尝试使用此属性在组件加载时调用一个函数，但我认为我没有正确地访问它。我应该使用componentDidUpdate来检查此属性是否已更改吗？还是有一种使用onload()的方法？

到目前为止，我的代码如下：

class App extends Component {

  isLoaded() {
    console.log("loaded!")
  }

  render() {
    return (
      <>
        <model-viewer
          src={require('..my model..')} 
          alt="A model"
          loading="eager"
          loaded={this.isLoaded}
         />
      </>
    )
  }
}

export default App;

- Sandy

---

尝试在componentDidMount()中实现。 - bakar_dev

@bakar_dev，我该如何在componentDidMount()中检查组件的loaded属性是否为true？componentDidMount()只有在所有组件都渲染完毕后才会被调用吗？ - Sandy

当一个组件挂载时，componentDidMount() 方法会被调用。 - bakar_dev

Answer 1

根据您遵循的React逻辑，有两种解决方案：

1. 基于类的通常使用关键字class Welcome extends React.Component
2. 使用函数组件和Hooks

1. 基于类的解决方案 对于这个解决方案，您可以使用componentDidMount函数。

 class Welcome extends React.Component {
  componentDidMount() {
    // call api or anything
    console.log("Component has been rendered");
  }
  render() {
    return <h1>Hello, World</h1>;
   }
 }
  
}

2.使用基于函数的组件和Hooks Effect Hook，即useEffect，为函数组件添加了执行副作用的能力。它在React类中具有与componentDidMount、componentDidUpdate和componentWillUnmount相同的作用 Ref

   import React, { useState, useEffect } from 'react';

   export default function Welcome() {
     useEffect(() => {
        // call api or anything
        console.log("loaded");
     });
     return <h1>Hello, World</h1>;
   }

- HA S

Answer 2

来自React文档：

componentDidMount()在组件被挂载（插入到树中）后立即调用。应该在此处进行需要DOM节点的初始化。如果您需要从远程端点加载数据，则这是实例化网络请求的好地方。

React生命周期的文档在这里

- Grant Singleton

Answer 3

问题在于，您在此情况下使用的model-viewer不是React组件。这意味着它既没有React组件行为也没有生命周期。

我的解决方案是寻找其他库作为包装器，如下所示：

• https://www.npmjs.com/package/react-3d-model-viewer
• https://www.npmjs.com/package/react-model-viewer

- ShinaBR2

Answer 4

我相信你正在寻找这个：

class App extends Component {
  state = {
    isLoaded: false
  }
  // use comonentDidMount lifecycle method
  componentDidMount() {
    this.setState({ isLoaded: true });
    console.log("loaded!");
  }

  render() {
    return (
      <>
        <model-viewer
          src={require('..my model..')} 
          alt="A model"
          loading="eager"
          loaded={this.state.isLoaded} // use this.state.isLoaded, not this.isLoaded
         />
      </>
    )
  }
}

export default App;

- Jan-Philipp Marks

---

抱歉，loaded={this.state.isLoaded}是什么意思？它会将this.state.isLoaded的值设置为loaded的值吗？ - Sandy

哦，抱歉我误读了你的代码。我以为你想将isLoaded传递给你的模型查看器，但实际上你正在传递一个回调函数。 - Jan-Philipp Marks

什么是model-viewer？一个组件吗？Web组件吗？你在这里展示的父组件与model-viewer的生命周期无关，因此您必须分享您的model-viewer代码才能理解问题。 - Jan-Philipp Marks

model-viewer是一个Web组件 https://modelviewer.dev/ - Sandy

我对如何访问组件的“loaded”属性感到困惑，或者是否有更好的方法在组件加载时调用函数。 - Sandy

Answer 5

试试这个： 在“react-model-viewer”的文档中，您可以在事件下看到一个加载事件，当查看器完成加载时会触发该事件。希望这样做可以解决问题 :)

 class App extends Component {

  isLoaded() {
    console.log("Loaded");
  }

  render() {
    return (
      <>
        <model-viewer
          src={require('..my model..')} 
          alt="A model"
          loading="eager"
          load={this.isLoaded}
         />
      </>
    )
  }
}

export default App;

- Jan-Philipp Marks