Geek Answers Handbook

How to add script tag to React / JSX file?

    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
    );
  }
Run codeHide result

I want to use inline scripts for the React component. I try so hard. What should be my approach? I could not find much information. I want to load a script when this component is selected on the application page.

+2
source share
3 answers

What you need to do is a code connection.

No code separation

+ load on 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 to do this, for example: https://github.com/didierfranc/react-code-splitting

+1
source

-, - , , , - ?

class SettingsPage extends React.Component {
  componentWillMount() {
    const script = document.createElement("script");

    script.src = "yourSrciptPath";
    script.async = true;

    document.body.appendChild(script);
  }
}
0

Use importor at the requiretop of this js file to add custom scripts or custom css, but I agree that you should look at it to make sure everything behaves as you expect.

Example:

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

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

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

More articles:


All Articles