React-dnd: スタイル付きコンポーネントでReactDnDを使用する。

編集： findDOMNodeを削除する提案をしてくれた

私は最近この問題に自分で遭遇し、ダンが少し前にこの質問にRefコンポーネントを使用して、彼のソリューションをセマンティックUIに適合させました。

セマンティックUIの例を次に示します

import React from 'react'
import { Item, Ref } from 'semantic-ui-react'
import { DragSource } from 'react-dnd'

const MyItem = props => (
    <Item>
        <Item.Content>
            <Item.Header>{props.header}<Item.Header>
            <Item.Content>{props.content}<Item.Content>
        </Item.Content>
    </Item>
)

const DraggableItem = props => {
  const { connectDragSource } = props
  return (
    <Ref innerRef={instance => connectDragSource(instance)}>
      <MyItem {...props} />
    </Ref>
  )
}

export default DragSource(...)(DraggableItem)

あなただけのスタイル付きコンポーネントの使用することができますinnerRefを、あなたはあなたを呼び出すことができ、基本となるDOMノードを取得するためにconnectDragSourceをそこに。

どうやら、スタイルコンポーネントではReactDOMのfindDOMNode()はまったく必要ありません。これは、 innerRefが実際の基になるDOMノードをすでに提供しているためです。

あなたの場合、それは次のようになります：

class MyComponent extends Component {
...
    render() {
        const { connectDragSource } = this.props;
        return (
            <StyledComponent
                innerRef={instance => connectDragSource(instance)}
            />
        )
    }
}

また、公式のチェスチュートリアルのKnightコンポーネントの実装を参照することもできます。
CodeSandboxからもアクセスできます。

私は内部の、類似したユースケースを持っているstyled-component Iからアイコンコンポーネントを使用してreact-fontawesomeようにのように、：

const Container = styled.li`...`
const DragHandle = styled(FontAwesomeIcon).attrs({...})`...`

function Task(props) {
  return (
    <Container innerRef={instance => connectDropTarget(connectDragPreview(instance))}>
    <DragHandle innerRef={instance => connectDragSource(instance)} />
}

上記の@zainfathoniによって提案されたliタグに基づくContainerコンポーネントでうまく機能します。 ただし、 FontAwesomeIcon基づくDragHandleで使用すると、次のエラーが発生します。

TypeError: node.setAttribute is not a function

fontawesomeがレンダリングするネイティブのspanタグを「掘り下げる」方法はありますか？

@artoorasあなたはおそらく今まであなたの問題を解決しましたが、ここに解決策があります-https

ref={instance => {
  connectDragSource(instance);
  connectDropTarget(instance);
}}

@darkowic
新しいRefreactAPIを使用してこの問題を解決するにはどうすればよいですか？

@rzkhosroshahi正確にはどういう意味ですか？

@darkowic
React DnD内でカスタムコンポーネントを使用したいのですが、新しいref React APIでは、このref={instance => { connectDragSource(instance); connectDropTarget(instance); }}ように、コールバック関数としてrefpropsを使用できません。
私の質問は、新しい参照用のこのスニペットコードをどのように使用するかということです。

@rzkhosroshahi
このcreateRef APIのことですか？

このためにそのAPIを使用することはできないと思います。
とにかく、コールバックAPIを削除する予定はないので、コールバックAPIを引き続き使用できます。

createRef APIドキュメントに記載されているように：

新しいcreateRefAPIに加えて、コールバック参照は引き続きサポートされます。
コンポーネントのコールバック参照を置き換える必要はありません。 これらは少し柔軟性が高いため、高度な機能として残ります。

バージョン4のスタイル付きコンポーネントが元の参照を渡すことを追加したいと思います
React.forwardRefを介して元のコンポーネントに。 だから、おそらくスタイルのコンポーネント
reactdndを使用した通常のDOM要素と同じように使用できます。 私はしませんでした
まだチェックしてください

PT。、26 PAZ 2018、22：52użytkownikザインFathoni [email protected]
napisał：

@rzkhosroshahi https://github.com/rzkhosroshahi
このcreateRefAPIを意味しますか
https://reactjs.org/blog/2018/03/29/react-v-16-3.html#createref-api ？

このためにそのAPIを使用することはできないと思います。
とにかく、コールバックAPIを削除する予定はないので、引き続き使用できます
このためのコールバックAPI。

createRef APIドキュメントに記載されているとおり、次のようになります。

新しいコールバック参照に加えて、コールバック参照は引き続きサポートされます
createRefAPI。
コンポーネントのコールバック参照を置き換える必要はありません。 彼らです
少し柔軟性が高いため、高度な機能として残ります。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/react-dnd/react-dnd/issues/1021#issuecomment-433539920 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AK-jNfM0ShyfqQdjt7nGS4uw0Zd_5kAqks5uo3X2gaJpZM4T1fRp
。

<StyledComp ref={instance => connectDragSource(instance)} />

ここでの私のSOの質問で説明さに、 PropTypesを完全に壊しているように見えることを除いて、私にとっては完璧に機能し

どちらか一方を使用する他のコンポーネントと、ネイティブDOM要素ラッパーを使用して2つを組み合わせたコンポーネントがいくつかあるため、これはrefを使用したものである必要があると考えています。

<StyledComp ref={instance => connectDragSource(instance)} />

ここでの私のSOの質問で説明さに、 PropTypesを完全に壊しているように見えることを除いて、私にとっては完璧に機能し

どちらか一方を使用する他のコンポーネントと、ネイティブDOM要素ラッパーを使用して2つを組み合わせたコンポーネントがいくつかあるため、これはrefを使用したものである必要があると考えています。

それは本番環境での作業ですか？ このアプローチを使用しましたが、プロジェクトをビルドするときに、コンポーネントがドラッグされなくなりました。

@rzkhosroshahi最小化はそれを壊しているようです。 まだ本番環境ではないため、解決策は見つかりませんoptimizationが、webpack構成でoptimization minimize: falseを設定している限り、機能します。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

私は同じ問題を抱えています。 私の質問は、デコレータではなくフック（useDragとuseDrop）でreact-dndを使用している場合に機能しますか？

ありがとう