Render script tag in React Component

Question

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!

Why wouldn't you import the script, and then call into it to trigger its behavior on the div from componentDidMount? — T.J. Crowder
– T.J. Crowder, Commented Dec 16, 2018 at 18:56
If he wants to add the script tag to that specific element the mentioned answer won't work. — kev
– kev, Commented Dec 16, 2018 at 18:56

Guim · Accepted Answer · 2018-12-16 19:06:04Z

11

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.

answered Dec 16, 2018 at 19:06

Guim

6782 gold badges12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kev · Accepted Answer · 2018-12-16 18:57:18Z

4

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.

edited Dec 16, 2018 at 18:57

answered Dec 16, 2018 at 18:51

kev

1,03110 silver badges15 bronze badges

Comments

Arif Cemre · Accepted Answer · 2019-07-26 10:32:26Z

3

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>
        );
    }
}

answered Jul 26, 2019 at 10:32

Arif Cemre

312 bronze badges

Comments

AnWho · Accepted Answer · 2023-01-23 08:30:03Z

0

You can also use a external component "Helmet" for implement script tags and you can also use link tag,meta tag,style tag etc with the help of this component.

edited Jan 23, 2023 at 8:30

answered Jan 23, 2023 at 8:28

AnWho

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Render script tag in React Component

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related