反応のあるDragula - 未知のTypeError：react_dragula_1.defaultは関数ではありません

Question

ドラッグ・ドロップや問題の発見のための反応でDragulaをテストしようとしています。私はエラーが発生しています：

問題を解決するために誰もがこの問題または手掛かりに直面しました。

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の矢印の機能を使用することができますが、そのためにあなたがこれをコンパイルするために取得するためにバベルで実験的な機能を有効にする必要があると思います。 詳細については、この質問をチェックしてくださいhttps://stackoverflow.com/a/31362350/4642844