基于prop的css/javascript文件加载
基于prop的css/javascript文件加载
提问于 2018-09-15 01:28:29
我正在处理一个使用react-ace库的reactjs文件。目前，我的代码如下所示
import React, { Component } from 'react';
import 'brace/mode/html';
import 'brace/theme/monokai';
import AceEditor from 'react-ace';
class AceHTML extends Component {
render () {
return (
<AceEditor
mode="html"
theme="monokai"
name="Sample"
showPrintMargin={false}
wrapEnabled={true}
value={this.state.value}
editorProps={{
$blockScrolling: true
}} />
);
}
}然而，我正在尝试找出一种让它更通用的方法。所以我可以说类似于<Ace mode="javascript" />，然后在组件中导入brace/mode/javascript而不是brace/mode/html
所以我的问题是:加载库的最佳方式是什么，而不是使用import
PS:我特别指出我使用react的原因是因为我使用create-react-app来创建应用程序。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-15 01:53:36
导入您要使用的所有资产，您将能够随心所欲地进行更改。
如果您最初不想导入所有资源，则可以使用动态导入，并在用户请求不同的编辑器配置时加载所需的块：
async changeTheme(theme) {
await import("brace/theme/" + theme)
this.setState({ theme });
}
async changeMode(mode) {
await import("brace/mode/" + mode)
this.setState({ mode });
}实时演示：https://stackblitz.com/edit/react-nzivmp?file=index.js (没有动态导入，因为它们不能在stackblitz上工作)
import React from 'react';
import { render } from 'react-dom';
import brace from 'brace';
import AceEditor from 'react-ace';
import 'brace/mode/html';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
import 'brace/theme/github';
function onChange(newValue) {
console.log('change',newValue);
}
// Render editor
export default ({mode, theme}) => (
<AceEditor
mode={mode}
theme={theme}
onChange={onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{$blockScrolling: true}}
/>
);Stack Overflow用户
发布于 2018-09-15 01:40:47
导入libs不是React的工作。Webpack决定将什么加载到捆绑包文件中。如果你想使用任何基于道具的选项，无论如何你都需要导入。
如果有大文件，并且您不想为应用程序用户加载这两个文件，则可以通过AJAX请求获取它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52336727
复制相关文章
相似问题