1

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

4

2 回答 2

3

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

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

  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}}
  />
);
于 2018-09-14T17:53:36.360 回答
1

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

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

于 2018-09-14T17:40:47.003 回答