加载React组件后，如何调用javascript文件中的函数？

我试图做的是： 加载组件后，我想从getMainBg.js调用getbg来更改背景

我的主页组件-

import React, { Component } from 'react';
import './Scripts/getMainBg.js';
class Homepage extends Component {
render() { 
return (

    <homepage>
        <div className="recent">
            <h1>Recently Added/Updated</h1>
                <div className="image">IMAGE1</div>
           </div>
           <div className="popular">
            <h1>Popular Right Now</h1>
                <div className="image"></div>
            </div>
        <div className="picks">
            <h1>Our Picks</h1>
                <div className="image"></div>
                <div className="image"></div>
        </div>
    </homepage>
    );
  }
}

export default Homepage;

我试着去做，但没有成功

您可以使用React组件的componentDidMount功能，该功能在安装React组件时执行一次。在导入和调用函数之前，还需要导出该函数

import React, { Component } from 'react';
import { getbg } from './Scripts/getMainBg.js';

class Homepage extends Component {

    componentDidMount() {
       getbg();
    }
    render() { 
        return (

        <homepage>
            <div className="recent">
                <h1>Recently Added/Updated</h1>
                    <div className="image">IMAGE1</div>
               </div>
               <div className="popular">
                <h1>Popular Right Now</h1>
                    <div className="image"></div>
                </div>
            <div className="picks">
                <h1>Our Picks</h1>
                    <div className="image"></div>
                    <div className="image"></div>
            </div>
        </homepage>
        );
      }
}

---

谢谢你的快速回答，但是我得到了以下错误-TypeError:Object。。。不是一个函数Homepage.componentDidMount src/components/Homepage.js:7 4 |类主页扩展了组件{5 | 6 | componentDidMount{>7 | getbg；很好，它工作了！原来我复制了你的代码后导入了错误的文件lol谢谢！

import React, { Component } from 'react';
import { getbg } from './Scripts/getMainBg.js';

class Homepage extends Component {

    componentDidMount() {
       getbg();
    }
    render() { 
        return (

        <homepage>
            <div className="recent">
                <h1>Recently Added/Updated</h1>
                    <div className="image">IMAGE1</div>
               </div>
               <div className="popular">
                <h1>Popular Right Now</h1>
                    <div className="image"></div>
                </div>
            <div className="picks">
                <h1>Our Picks</h1>
                    <div className="image"></div>
                    <div className="image"></div>
            </div>
        </homepage>
        );
      }
}

var url = []; //will store image urls

export function getbg(){
    var random = Math.floor(Math.random() * (url.length + 1)) + 0;
    document.getElementsByTagName("body")[0].style = "background-
    image: url('"+url[random]+"');";
    console.log('background loaded');
}