根据 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

导入库不是 React 的工作。 Webpack 决定将什么加载到捆绑文件中。如果你想使用任何基于道具的选项，你无论如何都需要导入。

如果有大文件并且您不想为应用程序的用户加载它们，您可以通过 AJAX 请求获取它们。

Answer 2

导入您要使用的所有资产，您将能够根据需要进行更改。

如果您最初不想导入所有资产，您可以使用动态导入并在用户请求不同的编辑器配置时加载所需的块：

  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}}
  />
);

根据 prop 加载 css/javascript 文件

loading css/javascript file based on prop

javascript

reactjs

react-ace