Question

我想在加载ReactJS组件时调用WOW

在初始HTML加载的HTML底部引用了WOW Javascript。

Javascript启动方式是

new WOW().init();

我认为在＃34; componentDidMount（）＆＃34;

上调用它会很好

我的组件代码是：

import * as React from 'react'; 

class Banner extends React.Component {
    componentDidMount() {
         new WOW().init();  //This does not work "[ts] Cannot find name "WOW"
    } 
    shouldComponentUpdate() {
        return false;
    }
    render() {
        return (
            <div className="banner-section">
                <div className="an-home-img-container banner-1">
                    <div className="overlay"></div>
                    <div className="home-banner-content text-center">
                        <div className="container">
                            <h1 className="wow fadeInDown animate hidden">
                                Some <span>Text</span> Here
                        </h1>
                            <button className="an-btn an-btn-default btn-big wow fadeIn hidden">Expole Us</button>
                        </div>
                    </div>
                </div>
            </div >
        )
    } }

export default Banner;

如何调用未导入的JS函数？

Answer 1

您可以在使用之前声明变量：

declare var WOW: any;

class Banner extends React.Component {
    componentDidMount() {
         new WOW().init();
    } 
    // ...
}

请注意，这会将WOW键入any，因此您将丢失类型检查。如果您需要进行类型检查，则可以使用类型而不是WOW声明any：

interface WOW {
    init: () => void
}

interface WOWConstructor {
    new(): WOW
}

declare var WOW: WOWConstructor;

class Banner extends React.Component {
    componentDidMount() {
         new WOW().init();
    } 
    // ...
}

在REACT TypeScript中调用第三方函数

1 个答案: