I want to call WOW when a ReactJS Component has loaded
The WOW Javascript is referenced at the bottom of the HTML on the inital HTML load.
the Javascript way to initiate is
new WOW().init();
and I thought it would be good to call this on "componentDidMount()"
my component code is:
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;
How can I call a JS function that isn't imported?
You can declare the variable before using it:
declare var WOW: any;
class Banner extends React.Component {
componentDidMount() {
new WOW().init();
}
// ...
}
Note that this will type WOW
as any
so you will lose type checking. If you need type checking you can declare WOW
with a type instead of any
:
interface WOW {
init: () => void
}
interface WOWConstructor {
new(): WOW
}
declare var WOW: WOWConstructor;
class Banner extends React.Component {
componentDidMount() {
new WOW().init();
}
// ...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.