загрузка файла css / javascript на основе проп - PullRequest
Новая
       23

загрузка файла css / javascript на основе проп

0 голосов
/ 14 сентября 2018

Я работаю с файлом activjs, использующим библиотеку 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 для создания приложения.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

импортируйте все активы, которые вы хотите использовать, и вы сможете вносить изменения по своему усмотрению.

Если вы не хотите изначально импортировать все ресурсы, вы можете использовать динамический импорт и загружать необходимые блоки, когда пользователь запрашивает другую конфигурацию редактора: 

  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 (без динамического импорта, так как они не работают на стеке) 

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}}
  />
);
0 голосов
/ 14 сентября 2018

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

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

...