17

私はそれを完全には理解していませんが、明らかに findDOMNode() の使用は推奨されていません。

ドラッグ アンド ドロップ コンポーネントを作成しようとしていますが、コンポーネント変数から参照にアクセスする方法がわかりません。これは私が現在持っているものの例です：

const cardTarget = {
    hover(props, monitor, component) {
        ...
        // Determine rectangle on screen
        const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
        ...
    }
}

ソース

編集

私のコンポーネントがドラッグ アンド ドロップのソースとターゲットの両方であることが原因である可能性があります。

4

3 に答える 3

3

より良い解決策

より良い解決策は、ドラッグ可能なコンポーネントを でラップし、divその上に ref を定義して、それをドラッグ可能なコンポーネントに渡すことです。

<div key={key} ref={node => { this.node = node; }}>
  <MyComponent
    node={this.node}
  />
</div>

でMyComponentラップされていDragSourceます。今すぐ使用できます

hover(props, monitor, component) {
  ...
  props.node && props.node.getBoundingClientRect();
  ...
}

(未定義のオブジェクトのprops.node &&呼び出しを避けるために追加されただけです)getBoundingClientRect

の代替findDOMNode

ラッピングを追加したくない場合divは、次のことができます。@imjared の返信とここで提案されている解決策は機能しません (少なくともreact-dnd@2.3.0とreact@15.3.1では)。

findDOMNode(component).getBoundingClientRect();を使用しない唯一の有効な代替手段findDOMNodeは次のとおりです。

hover(props, monitor, component) {
  ...
  component.decoratedComponentInstance._reactInternalInstance._renderedComponent._hostNode.getBoundingClientRect();
  ...
}

将来のバージョンでこの内部パスが変更される可能性があるため、これはあまり美しくも危険でもありません!react

その他の（弱い）代替

which を使用すると、正確な値が得られませんが、小さなdragSourcemonitor.getDifferenceFromInitialOffset();がある場合にはおそらく十分です。次に、戻り値は、 dragSourceのサイズに応じて小さなエラー マージンでかなり予測可能です。

于 2017-05-05T13:36:56.657 に答える