React-dnd: 드래그 소스가 전혀 렌더링되지 않습니다.

ES6 구문을 사용하고 있지만 같은 일이 저에게 일어나고 있습니다.

import React, { Component } from "react";
import { DragSource } from "react-dnd";
import PropTypes from "prop-types";

import "./Dictionary.css";

const propTypes = {
  entry: PropTypes.object.isRequired,

  // Injected by React DnD:
  isDragging: PropTypes.bool.isRequired,
  connectDragSource: PropTypes.func.isRequired
};

const TYPES = {
  ROW: "row"
};

/**
 * Implements the drag source contract.
 */
const rowSource = {
  beginDrag(props) {
    console.log(props);
    return {
      entry: props.entry
    };
  }
};

/**
 * Specifies the props to inject into your component.
 */
function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}

class Row extends Component {
  constructor(props) {
    console.log("here");
    super(props);
    this.state = {
      entry: props.entry
    };
  }

  static getDerivedStateFromProps = (props, state) => {
    return {
      entry: props.entry
    };
  };

  render() {
    const { isDragging, connectDragSource } = this.props;
    const { entry } = this.state;

    console.log("dragging:", isDragging);
    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }} className="row">
        <div>{entry.string}</div>
        <div>{entry.kMandarin}</div>
        <div>{entry.kDefinition}</div>
      </div>
    );
  }
}

Row.propTypes = propTypes;

export default DragSource(TYPES.ROW, rowSource, collect)(Row);

사용:

    "react-dnd-html5-backend": "^5.0.1",
    "react-dom": "^16.5.1",

예상: 렌더링된 구성 요소 및 콘솔 로그 참조
실제: 아무것도 렌더링되지 않습니다. 아무것도 기록되지 않습니다

내 앱의 루트에 공급자 구성 요소를 추가하면 문제가 해결되었습니다.

그러나 나는 그것이 필요하다는 것을 예제 코드에서 분명히 언급해야 한다고 생각합니다. 저는 예제를 보는 것으로 라이브러리 사용을 시작하는 방법을 이해하기에 충분하다고 생각했습니다.

문제는 이 if -statement입니다.
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

컨텍스트가 없으면 오류가 발생하는 검사를 비활성화하는 것처럼 보입니다.

아래와 같이 공급자를 추가해야 했습니다.

import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContextProvider } from "react-dnd";

<DragDropContextProvider backend={HTML5Backend}>
 <App/>
</DragDropContextProvider>

fyi: 방금 Portal을 사용할 때 문제가 발생했고 오래된 ReactDOM.unstable_renderSubtreeIntoContainer API를 ReactDOM.createPortal 로 교체하여 문제를 해결했습니다.

렌더링 문제를 해결하는 데 많은 시간을 할애하지 않은 이유는 무엇입니까? 여기에서 답을 찾았습니다. 샘플을 진지하게 수행하십시오. 감사합니다.

React 16.8.1에 대해 존재하는 것 같습니다. 내 관리자는 생성되지 않으며 DragSource 내부의 Context.Consumer는 자식을 렌더링하지 않습니다.

이것은 문서의 빠른 시작 섹션 어디에도 없습니다.

이것은 실제로 문서에 있어야 하는 첫 번째 것입니다 ...

동일한 문제가 있지만 특정 프로덕션 빌드에서만 발생합니다( DragDropContextProvider 가 내 트리에 있는지 확인했습니다). 반응 개발 도구를 사용할 때 DragDropContextProvider 가 손실되고 구성 요소 트리에서 Unknown 로 나타납니다(스크린샷 참조).

v7.3.2에서 다음으로 다운그레이드

• "반응-dnd": "7.1.0",
• "react-dnd-html5-backend": "7.1.0"

나를 위해 그것을 고친다.

나는 또한 같은 버그에 직면했다.
개발 중에는 표시되지만 프로덕션에는 표시되지 않습니다.

제 환경입니다.

• "반응-dnd": "7.1.0",
• "react-dnd-html5-backend": "7.1.0"

const render = () => {
  ReactDOM.render(
    <DragDropContextProvider backend={HTML5Backend}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppContainer>
            <App />
          </AppContainer>
        </ConnectedRouter>
      </Provider>
    </DragDropContextProvider>,
    document.getElementById('app')
  );
};

DragDropContextProvider를 알 수 없음

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상의 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

그것이 자동으로 닫히기 전에 해결되었는지 아는 사람이 있습니까?

내가 해결한 방법
제 경우에는 모두 dev에서 잘 작동했지만 프로덕션에서는 완전히 깨졌습니다.

문제는 useDrag 가져오기 경로에서 발생했습니다...

가져오기가 작동하지 않음
import {useDrag} from "react-dnd/lib/index";

작업 가져오기
import {useDrag} from "react-dnd";

즉, 첫 번째 수입이 어떻게 시작되었는지 정말로 모릅니다.

또한 앱 루트에서 DndProvider를 가져올 필요가 없다고 자신 있게 말할 수 있습니다. 문제가 가져오기로 인해 발생했다는 것을 알기 위해 이전에 수행했지만 가져오기 "수정" 후에 앱 루트 대신 구성 요소 중 하나에서 DndProvider를 복원했으며(더 깨끗한 코드용) 작동합니다. 좋아.

문맥:

• "반응": "^16.8.3",
• "반응-dnd": "^9.0.1",
• "react-dnd-html5-backend": "^9.0.0",

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상의 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

아직 해결책이 없나요? 이 주제에서 제안된 내용이 도움이 되지 않았습니다.

"반응-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",

상태 위치를 변경할 때만 모든 것이 잘 작동합니다. 콘솔 로그에서 변경 사항을 볼 수 있는 동안 렌더링을 볼 수 없습니다.