我正在处理一个使用 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
创建应用程序。
最佳答案
导入您要使用的所有 Assets ,您将能够根据需要进行更改。
如果您最初不想导入所有 Assets ,您可以使用动态导入并在用户请求不同的编辑器配置时加载所需的 block :
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}}
/>
);
关于javascript - 基于 prop 加载 css/javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52336727/