How to add script tag in React/JSX file?

Question

    private get mouseGestureSettingView() {
    const {selectedMenu} = this.state;
    return ( selectedMenu == 2 ?
      <script src="../../assets/js/extensions/mouse-gesture/options.js"></script>
      
    <div className={styles.settingForm}>
        <h3>Mouse Gesture</h3>
                    <div className={options.opts}>
            <div className={options.opttitle} data-i18ninner={'newadd'}></div>
            <div className={options.optcontent}>
                <form>
                    <input id={'addgesture'} className={options.newadd} type={'button'} value={'newgesturess'}/>
                </form>
            </div>
        </div>
        <div className={options.opts}>
            <div className={options.opttitle} data-i18ninner={'editgesture'}></div>
            <div className={options.optcontent} id={'editgesture'}></div>
        </div>
        <div style={{clear:'both'}}></div>
        </div>
      : null
    );
  }

I want to use inline scripting to a React component. I am trying like this. What should be my approach? I could not find much information. I want to load the script when this component is selected on the app page.

score 1 · Answer 1 · edited Aug 17 '17 at 13:09

What you need to do is codesplitting.

Without code splitting

+ are loaded at the first start

import Login from './Login'
import Home from './Home'

const App = ({ user }) => (
  <Body>
    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
    <Route path="/login" component={Login} />
  </Body>
)

With code splitting:

import Async from 'react-code-splitting'

import Login from './Login'
const Home = () => <Async load={import('./Home')} />
const LostPassword = props => <Async load={import('./LostPassword')} componentProps={props}/>

const App = ({ user }) => (
  <Body>
    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
    <Route path="/login" component={Login} />
    <Route path="/lostpassword" component={LostPassword} />
  </Body>
)

There are several ways of doing this, for example: https://github.com/didierfranc/react-code-splitting

locropulenton · Answer 2 · 2017-08-18T12:18:04.060

0

Use import or require on the top on a given js file for adding custom scripts or custom css, but I agree that you should review it to be sure everything behaves as you expect.

Example:

import "../../assets/js/extensions/mouse-gesture/options.js";

Or if you want to import a script only when using a method:

myMethod() {
  require("../../assets/js/extensions/mouse-gesture/options.js");
  ...
}

edited Aug 18 '17 at 12:18

answered Aug 17 '17 at 13:09

locropulenton

4,743
3
32
57

I don't want to import this Javascript every time when I am running the App. I just want to import this script only when I am using this method. This is a setting page. SO when I shall click that option then only it should load this JavaScript and render according to that – Ankur Sardar Aug 18 '17 at 01:06

score 0 · Answer 3 · answered Dec 19 '19 at 17:46

You can try this library: npm install --save react-script-tag

https://www.npmjs.com/package/react-script-tag

import React, { Component } from 'react';
import ScriptTag from 'react-script-tag';

class Demo extends Component {

    render() {
        return (<ScriptTag isHydrating={true} type="text/javascript" src="some_script.js" />);
    }
}

How to add script tag in React/JSX file?

3 Answers3

Linked