reactjs - react : how can I call a function when a component has loaded?

标签 reactjs loading onload onload-event

我正在尝试使用 Google 的 model-viewer web component在我的网站上显示模型。文档说该组件有一个“已加载”属性,它是“只读”和“如果自上次 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;

最佳答案

事情是model-viewer您在这种情况下使用 不是 一个 react 组件。这意味着它既没有反应组件行为也没有生命周期。
我的解决方案是寻找其他库作为包装器,如下所示:

  • https://www.npmjs.com/package/react-3d-model-viewer
  • https://www.npmjs.com/package/react-model-viewer
  • 关于reactjs - react : how can I call a function when a component has loaded?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62774907/

    相关文章:

    javascript - 为什么 DOMappendChild() 在 ('load' ,...) 上触发,但 jQueryappend() 不会?

    javascript - 我在尝试创建 React 应用程序时遇到错误

    reactjs - React Webpack - 错误 : Module is not a loader (must have normal or pitch function)

    php - 类似YouTube的Ajax加载栏不起作用

    c# - WPF 加载微调器

    javascript - 知道特定资源何时完成加载

    javascript - onload 和 onclick 等效吗?

    javascript - React hooks 改变 postMessage 的状态

    reactjs - Jest 单元测试 - 使用 props 模拟组件

    android - 在启动画面中插入加载环