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

Question

我正在尝试使用 Google 的 model-viewer web component 在我的网站上显示模型。文档说该组件有一个 'loaded' 属性，即 'read only' 和 'returns true if the load event has fired since the last src change'。我正在尝试使用此属性在组件加载后调用一个函数，但我认为我没有正确访问它。我应该使用 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

来自 React 文档：

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

React 生命周期的文档是 here

Answer 2

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

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

Answer 3

我相信你正在寻找这个：

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;

Answer 4

试试这个：在“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;

Answer 5

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

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

1. Class 基于负载 对于此解决方案，您可以使用 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>;
   }

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

React: how can I call a function when a component has loaded?

loading

onload

onload-event

reactjs