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

Question

（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()函数

Answer 1

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