如何在 React/JSX 文件中添加脚本标签？
[英]How to add script tag in 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 ); }我想对 React 组件使用内联脚本。 我正在尝试这样。 我的方法应该是什么？ 我找不到太多信息。 我想在应用程序页面上选择此组件时加载脚本。
3 个解决方案
解决方案1
1 2017-08-17 13:02:59
您需要做的是代码拆分。
没有代码拆分
+ 在第一次启动时加载
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
0 2017-08-17 13:09:25
在给定的 js 文件的顶部使用import或require来添加自定义脚本或自定义 css，但我同意您应该检查它以确保一切都如您所愿。
示例：
import "../../assets/js/extensions/mouse-gesture/options.js";
或者，如果您只想在使用方法时导入脚本：
myMethod() {
require("../../assets/js/extensions/mouse-gesture/options.js");
...
}
解决方案3
0 2019-12-19 17:46:58
你可以试试这个库： 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" />);
}
}
使用由加载的反应时使用 JSX<script> tag on html page
[英]Use JSX when using react loaded by <script> tag on html page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.