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*() 함수가 전달한 내용을 보기 때문에 작동합니다. 선언적으로(DOM React 요소를 전달하고 반환으로 DOM React 요소를 가져옴) 또는 명령적으로(DOM 노드로 호출하고 나중에 null 로 호출하는 것을 잊지 마십시오) refs 작업처럼 ).

(이는 또한 다른 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://exploringjs.com/es6/ch_modules.html

축소된 예제를 작성하려고 하는 도중에 버그를 먼저 잡았습니다!

기본 내보내기와 명명된 내보내기의 차이점에 대해 알고 있지만 어떤 것이 필요한지 항상 알지 못하고 디버그 도구가 무슨 일이 일어나고 있는지 보여주는 오류 메시지를 제공하는 데 좋지 않습니다. 이제 Webpack에 의해 문제가 수정되었음에도 불구하고 해당 오류 메시지가 문제를 가리키는 방법을 알 수 있습니다. 강의 감사합니다!

추신: 이것을 문서에 추가하기 위해 풀 리퀘스트를 제출한다면(시간이 있을지 모르겠지만) 어디에 넣나요? connectDragSource 오류가 이 솔루션을 가리키는 경우 도움이 될 것입니다.

확실하지 않습니다. 현재 메시지가 충분하다고 생각합니다. 이제 인터넷 검색에도 이 문제가 있습니다 :-)

그건 그렇고 나는 귀하의 질문을 다시 읽고 <div> 구체적으로 랩핑할 필요가 없다는 점을 강조하고 싶습니다. 오류 메시지의 요점은 connectDragSource() 가 <div> , <li> 또는 기타 모든 DOM 요소를 래핑해야 한다는 것입니다. 위의 해결 방법은 사용자 지정 구성 요소에만 필요합니다.

이제 인터넷 검색에도 이 문제가 있습니다 :-)

다행스럽게도! :이를 드러내고 웃다:

그냥 당신이 체인에 사용하는 경우, 약간의 정밀도를 추가하려면 connect*() 당신의 통화 render() 대신에 당신이 할 필요가,의, 같은 뜻을 위 접근하지 작업 수행원:

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

이에 대한 2가지 질문:
Q1. 3rd 부품 라이브러리를 드래그 대상으로 사용할 수도 있습니다. 사용 사례는 반응 스트랩 "컨테이너"를 대상으로 사용하고 페이지를 빌드하기 위해 "행" 또는 그 안에 다른 구성 요소를 삭제하는 것입니다.
Q2. findDOMNode가 기능 구성 요소에서 작동하지 않는 것 같습니다. 일부 타사 구성 요소가 작동하는 경우 끌어서 놓기를 수행하는 방법은 무엇입니까?