在.tsx文件中调用到.js文件中的函数

(1) 问题遇到的现象和发生背景

一个基于react的项目,使用webstorm,想在一个.tsx文件中引入wow.min.js文件
(主要是要使用到.js文件中的WOW()函数)

(2) 问题相关代码,请勿粘贴截图

import React, { ReactChild, ReactFragment, ReactPortal, useEffect, useState } from "react";
import {BaseBlock} from "../common/BaseBlock";
import {Banner} from "../components/mainPage/Banner";
import 'animate.css';
require('../api/wow.min');

export function Home() {

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
}//初始化函数

const data = {
    title: "    ",
    items: [{
        //略
    }]
};

const webContent = <div>
        <div className="content">
            <div className={"left"}>
                <div className={"wow slideInLeft"}>   {/*动画*/}
                    <div className={"frame1"}>
                        <img className={"img1"} src={data.items[0].img}/>
                    div>
                    <div className={"name1"}>{data.items[0].name}div>
                    <div className={"desc1"}>{data.items[0].desc}div>
                div>
            div>
            <div className={"middle"}>
                <div className={"frame2"}>
                    <img className={"img2"} src={data.items[1].img}/>
                div>
                <div className={"name2"}>{data.items[1].name}div>
                <div className={"desc2"}>{data.items[1].desc}div>
            div>
            <div className={"right"}>
                <div className={"frame3"}>
                    <img className={"img3"} src={data.items[2].img}/>
                div>
                <div className={"name3"}>{data.items[2].name}div>
                <div className={"desc3"}>{data.items[2].desc}div>
            div>
        div>
    div>
return <BaseBlock name={"Home"} webContent={webContent}/>

}
Home.blockName = "Home"

(3) 运行结果及报错内容

TS2304: Cannot find name 'WOW'

(4) 我想要达到的结果

能够在.tsx文件里面使用WOW()函数

jsx可以直接使用 js 函数 。 只要引入就行 用import 引入试试 。

这块


require('../api/wow.min');

改成


const WOW = require('../api/wow.min');

试一试