React-dnd: サードパーティのコンポーネントをドラッグソースとして使用するにはどうすればよいですか？

良い質問。 私はあなたがこれを行うことができるはずだと思います：

import { findDOMNode } from 'react-dom';

class DraggableListGroupItem extends Component {
  render() {
    const { connectDragSource, ...rest } = this.props;
    return (
      <ListGroupItem
        {...rest}
        ref={instance => connectDragSource(findDOMNode(instance))}
      />
    );
  }
}

export default DragSource(...)(DraggableListGroupItem);

これが機能するのは、 connect*()関数が渡されたものを調べるためです。 それらは、宣言的に（DOMReact要素を渡してDOMReact要素を取得する）または強制的に（DOMノードで呼び出し、後でnull呼び出すことを忘れないでください-

（これにより、ドラッグソースとして他のDOM要素を自由に使用できます。たとえば、 findDOMNode()から取得したノードをクエリできます。これは、内部に依存するのは悪いため、最後の手段として使用する必要があります。サードパーティコンポーネントのDOM構造。）

これは私にはうまくいきませんでした。 ネストは正しくなりましたが、要素はドラッグできず、コンソールで次のエラーが発生します。

Unhandled promise rejection TypeError: (0 , _reactDom2.default) is not a function(…)

あなたがタイプしたと思います

import findDOMNode from 'react-dom';

それよりも

import { findDOMNode } from 'react-dom';

実際、 react-domはデフォルトのエクスポートがないため、 findDOMNodeという特定の名前のエクスポートを使用しました。 デフォルトエクスポートと名前付きエクスポートの違いの詳細： http ：

私は縮小された例を書き込もうとしている最中だったが、あなたは最初にバグを見つけた！

デフォルトのエクスポートと名前付きのエクスポートの違いについては知っていますが、どちらが必要かを常に認識しているわけではなく、デバッグツールは何が起こっているのかを示すエラーメッセージを表示するのが得意ではありません。 Webpackによって破壊されたにもかかわらず、そのエラーメッセージが問題をどのように示しているかがわかります。 レッスンありがとうございます！

PS：プルリクエストを提出してこれをドキュメントに追加する場合（時間がないかどうかはわかりません）、どこに配置しますか？ connectDragSourceエラーがこの解決策を示していると役に立ちます。

よくわかりませんが、現在のメッセージで十分だと思います。 今、私たちはグーグルについてもこの問題を抱えています:-)

ちなみに、私はあなたの質問を読み直し、あなたがそれを特に<div>包む必要が絶対にないことを強調したいと思います。 エラーメッセージのポイントは、 connectDragSource()がすべてのDOM要素（ <div> 、 <li> 、またはその他）をラップする必要があるということです。 上記の回避策は、カスタムコンポーネントに対してのみ必要です。

今、私たちはグーグルについてもこの問題を抱えています:-)

幸運にも！ ：ニヤリ：

ちょうどあなたがチェーンに使用している場合、少し精度を追加したいconnect*()の呼び出しは、あなたにrender() 、S上記のアプローチと同じ意志ではない仕事を、代わりにあなたがする必要があります続く：

ref={instance => {
  const node = findDOMNode(instance);
  connectDragSource(node);
  connectDropTarget(node);
}}

これに関する2つの質問：
Q1。 ドラッグターゲットとしてサードパートライブラリを使用することもできますか？ ユースケースは、ターゲットとしてreactstrap "Container"を使用し、その中に "Row"または他のコンポーネントをドロップしてページを構築することです。
Q2。 findDOMNodeは機能コンポーネントでは機能しないようです。 一部のサードパーティコンポーネントが機能している場合、それらをドラッグアンドドロップするにはどうすればよいですか？