javascript - 基于 prop 加载 css/javascript 文件

Question

我正在处理一个使用 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创建应用程序。

Answer 1

导入您要使用的所有 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}}
  />
);