如何让我的 JavaScript 文件在我的组件结束时执行？

Question

我的 html 加载后，我无法加载导入的 javascript 文件。

我最近开始使用 React 进行编码，而且我对此很陌生。我在我的网站上包含了一个图片库。每当我运行我的代码时，我都会收到此错误：

TypeError: Cannot read property 'querySelector' of null

据我所知，这是因为首先运行导入的'homebasescript.js'，因此没有任何返回。如何更改代码以使其正常工作？我将非常感谢您的帮助！

主页.js

import React, { Component } from 'react';

import './Homebase.scss';

import Shuffle from 'shufflejs';

import Demo from './Homebasescript.js';

class homebase extends Component {

  render() {

    return (

      <section className="about-page">

      <div className="container-about">

        <div className="row-about">

          <div className="col-12@sm">

            <h1 className="about-title">Shuffle homepage demo</h1>

          </div>

        </div>

      </div>

      <div className="container-about">

        <div className="row-about">

          <div className="col-4@sm col-3@md">

            <div className="filters-group">

              <label htmlFor="filters-search-input" className="filter-label">Search</label>

              <input className="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />

            </div>

          </div>

        </div>

        <div className="row-about">

          <div className="col-12@sm filters-group-wrap">

            <div className="filters-group">

              <p className="filter-label">Filter</p>

              <div className="btn-group filter-options">

                <button className="btn btn--primary" data-group="space">Space</button>

                <button className="btn btn--primary" data-group="nature">Nature</button>

                <button className="btn btn--primary" data-group="animal">Animal</button>

                <button className="btn btn--primary" data-group="city">City</button>

              </div>

            </div>