I'm making a React application and I need to run a Javascript
script only in one component, making reference to one of the div
's.
I know there are some libraries to do so, but I wonder if there's a more direct way to do it. Right now I do this:
import React, { Component } from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component {
render() {
return (
<div>
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
<script src="js/myScript.js" />
</div>
);
}
}
But nothing happens. The script is stored in public/js/myScript.js
.
Thanks!
The react-helmet is also a well-known npm package mostly used for adding an element at the head of a react document. We can add a script tag inside the head of the document using this package.
Step 1: I installed React-Helmet using npm i react-helmet from the terminal while inside my react-app folder path. Step 2: I then added import {Helmet} from "react-helmet"; header in my code. Show activity on this post. To add script tag or code in head tag <head> , use react-helmet package.
React's goal is in many ways to render HTML in a web page. React renders HTML to the web page by using a function called ReactDOM. render() .
Adding a new script tag and directly appending it to the <head> element of the page is the easiest way to add <script> tags in the React app. react-helmet is a third-party library that can be used to achieve the same thing by handling the <head> tag on every page.
Any approach to render the script tag doesn't work as expected: React DOM (the renderer for react on web) uses createElement calls to render JSX into DOM elements. createElement uses the innerHTML DOM API to finally add these to the DOM ( see code in React source ). innerHTML does not execute script tag added as a security consideration.
In this article, we will see different ways to include JavaScript inside a react application. If you want the script to be loaded on every page of your application, you can directly add it to the index.html as shown below: 1... 8... If you run the application, inspect and check, you will see the script added inside the head tag:
Rendering Elements. Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen: const element = <h1>Hello, world</h1>; Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. Note:
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. One might confuse elements with a more widely known concept of “components”. We will introduce components in the next section.
I finally solved it by adding the componentDidMount
function before rendering the component. Like this:
import React, { Component } from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component {
componentDidMount() {
const script = document.createElement("script");
script.src = "js/myScript.js";
script.async = true;
document.body.appendChild(script);
}
render() {
return (
<div>
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
</div>
);
}
}
If somebody has a better solution please feel free to share it. I'll be aware to further recomendations.
By using dangerouslySetInnerHTML
you can add any valid html you want to your elements.
import React, { Component } from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component {
render() {
return (
<div dangerouslySetInnerHTML="<script src='js/myScript.js' />" >
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
</div>
);
}
}
I should mention though that as the attribute name suggest, its use is strongly discouraged.
export default class MyComponent extends Component {
componentDidMount() {
const script = document.createElement("script");
script.innerHTML = "window.onload = function() {\n" +
...
"}"
script.async = true;
document.body.appendChild(script);
}
render() {
return (
<div>
</div>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With