React-dnd: Sumber seret tidak merender sama sekali

Hal yang sama terjadi pada saya, meskipun saya menggunakan sintaks 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);

Menggunakan:

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

Diharapkan: lihat komponen yang dirender dan log konsol
Aktual: tidak ada yang diberikan; tidak ada yang dicatat

Menambahkan komponen penyedia di root aplikasi saya memecahkan masalah.

Namun saya pikir - harus dicatat dengan jelas dalam kode contoh bahwa itu diperlukan - saya pikir melihat contoh sudah cukup untuk memahami cara mulai menggunakan perpustakaan

Saya pikir masalahnya adalah if -pernyataan ini:
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

Sepertinya itu menonaktifkan pemeriksaan yang jika tidak akan menimbulkan kesalahan jika tidak ada konteks.

Saya harus menambahkan penyedia seperti yang ditunjukkan di bawah ini:

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

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

fyi: Saya baru saja mengalami masalah saat menggunakan Portal dan memperbaikinya dengan mengganti ReactDOM.unstable_renderSubtreeIntoContainer API yang sudah usang dengan ReactDOM.createPortal .

Mengapa saya tidak menghabiskan banyak waktu untuk memecahkan masalah rendering alasan, menemukan jawabannya di sini, tolong lakukan sampel Anda dengan serius, terima kasih

Tampaknya ada di React 16.8.1, manajer saya tidak pernah dibuat dan Context.Consumer di dalam DragSource tidak pernah merender anak-anak.

Ini tidak ada di bagian Mulai Cepat pada dokumen.

Ini praktis hal pertama yang harus ada di dokumen...

Masalah yang sama di sini tetapi hanya di bawah produksi tertentu (saya memastikan bahwa DragDropContextProvider ada di pohon saya). Saya perhatikan bahwa ketika menggunakan alat dev reaksi DragDropContextProvider hilang dan muncul sebagai Unknown di pohon komponen (lihat tangkapan layar)

Menurunkan versi dari v7.3.2 ke

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

memperbaikinya untuk saya.

Saya juga mengalami bug yang sama.
Ditampilkan dalam pengembangan tetapi tidak dalam produksi.

Ini adalah lingkungan saya.

• "bereaksi-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 Tidak Diketahui

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

Adakah yang tahu apakah itu telah diselesaikan sebelum ditutup secara otomatis?

Bagaimana saya telah menyelesaikannya?
Dalam kasus saya, semua bekerja dengan baik di dev, tetapi benar-benar rusak dalam produksi.

Masalahnya berasal dari jalur impor useDrag ...

Impor tidak berfungsi
import {useDrag} from "react-dnd/lib/index";

Impor kerja
import {useDrag} from "react-dnd";

Yang mengatakan, saya benar-benar tidak tahu bagaimana impor pertama berasal.

Juga, saya dapat dengan aman mengatakan bahwa Anda tidak perlu mengimpor DndProvider di root aplikasi . Saya telah melakukan itu sebelumnya untuk menemukan bahwa masalahnya berasal dari impor, tetapi setelah "perbaikan" impor, saya telah memulihkan DndProvider di salah satu komponen alih-alih root aplikasi (untuk kode yang lebih bersih) dan itu berhasil bagus.

Konteks:

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

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

ada solusi belum? tidak ada yang disarankan dalam topik ini membantu.

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

semuanya berfungsi dengan baik hanya ketika saya mengubah posisi status, saya tidak dapat melihat render sementara saya dapat melihat perubahan di log konsol.