Я работаю над файлом responsejs, который использует библиотеку react-ace. В настоящее время мой код выглядит так

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 для создания приложения.

1
Robert E. McIntosh 14 Сен 2018 в 20:28

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}}
  />
);
3
marzelin 14 Сен 2018 в 19:20

Импорт библиотек - это не работа для React. Webpack решает, что загрузить в файл пакета. Если вы хотите использовать какие-либо параметры, основанные на реквизитах, вам в любом случае необходимо импортировать оба.

Если есть большие файлы, и вы не хотите загружать их оба для пользователя вашего приложения, вы можете получить их через запрос AJAX.

1
Arek C. 14 Сен 2018 в 17:40