如何在 React/JSX 文件中添加脚本标签？答案

【问题标题】：How to add script tag in React/JSX file?如何在 React/JSX 文件中添加脚本标签？
【发布时间】：2018-01-25 21:38:09
【问题描述】：

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

我想对 React 组件使用内联脚本。我正在尝试这样。我的方法应该是什么？我找不到太多信息。我想在应用页面上选择此组件时加载脚本。

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

您需要做的是代码拆分。

无需代码拆分

+ 在第一次启动时加载

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

使用代码拆分：

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

有几种方法可以做到这一点，例如：https://github.com/didierfranc/react-code-splitting

【讨论】：

【解决方案2】：

在给定 js 文件的顶部使用 import 或 require 来添加自定义脚本或自定义 css，但我同意您应该检查它以确保一切都按预期运行。

例子：

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

或者如果您只想在使用方法时导入脚本：

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

【讨论】：

我不想在每次运行应用程序时都导入这个 Javascript。我只想在使用此方法时导入此脚本。这是一个设置页面。因此，当我单击该选项时，只有它应该加载此 JavaScript 并根据该选项进行渲染

【解决方案3】：

你可以试试这个库：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" />);
    }
}

【讨论】：