calling function to display html in javascript
Question
I have this function in my spinner.js file:
import React from 'react';
import broomAndText from './ezgif.com-video-to-gif-3.gif';
import './spinner.css';
function myGif() {
return <html><body><div class="imgContainer"><img src={broomAndText} alt="broomAndText"/></div></body></html>
}
export default myGif;
I want to call this function from here:
} else {
myGif()
createCheckoutSession()
console.log("does not exist!")
}
});
when I call myGif() like this, it does not display onto screen. how do i do this?
1 answers
solution1
1 2021-04-26 01:04:30
React components shouldn't render another html or body tag, it should be just the div . React components also use a className prop.
import React from 'react';
import broomAndText from './ezgif.com-video-to-gif-3.gif';
import './spinner.css';
function MyGif() {
return (
<div class="imgContainer">
<img src={broomAndText} alt="broomAndText"/>
</div>
);
}
export default MyGif;
React components are also not called as functions, but rather they are templated into renderable JSX and the React framework handles calling the function during the component lifecycle.
import MyGif from '../path/to/MyGif";
...
return (
...
<MyGif />
...
);
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.