Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Render script tag in React Component

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!

like image 914
gtech Avatar asked Dec 16 '18 18:12

gtech


People also ask

Can I add a script tag in React?

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.

How do I use React script tag?

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.

Can we render HTML file in React?

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() .

How do I add a script to React-helmet?

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.

How to render a script tag in React DOM?

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.

How to include JavaScript inside a react application?

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:

What is an element in react rendering?

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:

What are elements in React DOM?

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.


3 Answers

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.

like image 76
gtech Avatar answered Oct 22 '22 09:10

gtech


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.

like image 39
kev Avatar answered Oct 22 '22 09:10

kev


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>
        );
    }
}
like image 3
Arif Cemre Avatar answered Oct 22 '22 09:10

Arif Cemre