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 组件使用内联脚本。我正在这样尝试。我的方法应该是什么？我找不到太多信息。我想在应用程序页面上选择此组件时加载脚本。
您需要做的是代码分割。
没有代码分割
+ 在第一次启动时加载
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 https://github.com/didierfranc/react-code-splitting
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
