React：组件加载后如何调用函数？

Question

我正在尝试使用 Google 的模型查看器 Web 组件在我的网站上显示模型。文档说该组件有一个“已加载”属性，该属性是“只读”的，并且“如果自上次 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;

Answer 1

有两种解决方案取决于您遵循哪种反应逻辑

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 类Ref中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途

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

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

Answer 2

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

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

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