Драгула с реагировать - Uncaught TypeError: Reaction_dragula_1.default не является функцией

Question

Я пытаюсь проверить Dragula с реакцией на перетаскивание и нахождение проблем. Я получаю ошибку:

Uncaught TypeError: Reaction_dragula_1.default не является функцией

Любой сталкивался с этой проблемой или подсказкой, чтобы решить проблему.

import * as React from "react";
import * as ReactDOM from 'react-dom';
import Dragula from 'react-dragula';

export class MultiPicklist extends React.Component {
    render() {
        return (<div className="swish-input-textarea">
                <div className='parent'>
                    <div className='wrapper'>
                        <div id='left-defaults' className='container' ref={this.dragulaDecorator} >
                            <div>Element 0</div>
                            <div>Element 1</div>
                            <div>Element 2</div>
                            <div>Element 3</div>
                        </div>
                        <div id='right-defaults' className='container'>
                            <div>Element a</div>
                            <div>Element b</div>
                            <div>Element c</div>
                            <div>Element d</div>
                            <div>Element e</div>
                        </div>
                    </div>
                </div>
                </div>);
    },
        dragulaDecorator = (componentBackingInstance) => {
            if (componentBackingInstance) {
                let options = { };
                console.log('componentBackingInstance');
                console.log(componentBackingInstance);
                Dragula([componentBackingInstance]);
             }
  };    

}

Answer 1

Я вижу, вы немного возитесь с синтаксисом класса ES6. Попробуйте вытащить за пределы определения класса обратный вызов ref:

import * as React from "react";
import * as ReactDOM from 'react-dom';
import Dragula from 'react-dragula';

export class MultiPicklist extends React.Component {
    render() {
        return (<div className="swish-input-textarea">
                <div className='parent'>
                    <div className='wrapper'>
                        <div id='left-defaults' className='container' ref={dragulaDecorator} >
                            <div>Element 0</div>
                            <div>Element 1</div>
                            <div>Element 2</div>
                            <div>Element 3</div>
                    </div>
                        <div id='right-defaults' className='container'>
                            <div>Element a</div>
                            <div>Element b</div>
                            <div>Element c</div>
                            <div>Element d</div>
                            <div>Element e</div>
                        </div>
                    </div>
                </div>
                </div>);
    }

}  
const dragulaDecorator = (componentBackingInstance) => {
        if (componentBackingInstance) {
            let options = { };
            console.log('componentBackingInstance');
            console.log(componentBackingInstance);
            Dragula([componentBackingInstance]);
         }
};

Вы также можете использовать функции стрелок ES6 в методах класса, но для этого вам нужно включить экспериментальные функции в Babel, чтобы компилировать их. Проверьте этот вопрос SO для более подробной информации: /questions/14551690/kak-ispolzovat-funktsii-strelok-otkryityie-polya-klassov-v-kachestve-metodov-klassa/14551711#14551711