React-dnd: ड्रैग सोर्स बिल्कुल भी रेंडर नहीं हो रहा है

को निर्मित 15 सित॰ 2018 · 15टिप्पणियाँ · स्रोत: react-dnd/react-dnd

बग का वर्णन करें
DragSource से सजाया गया घटक बिल्कुल भी प्रस्तुत नहीं किया जाता है (रेंडर फ़ंक्शन को नहीं कहा जाता है)

प्रजनन करना
ऐसे घटक लिखें:

import * as React from "react";
import styled from "styled-components";
import {
  DragSource,
  DragSourceConnector,
  DragSourceMonitor,
  ConnectDragSource
} from "react-dnd";

const ImageHolder = styled.div`
  margin: 10px;
  max-width: 200px;
  width: 200px;
  min-height: 100px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
`;

const ImageNameHolder = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
`;

interface Props {
  imagePath: string;
  connectDragSource?: ConnectDragSource;
  isDragging?: boolean;
}

@DragSource<Props>(
  "image",
  {
    beginDrag: (props: Props) => props.imagePath
  },
  (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  })
)
export class PhotosBrowserPhoto extends React.Component<Props> {
  render() {
    const { imagePath, connectDragSource } = this.props;
    console.log({ connectDragSource });
    return connectDragSource(
      <div>drag me</div>
    );
  }
}

अपेक्षित् व्यवहार
drag me टेक्स्ट के साथ ड्रैग करने योग्य घटक, कंसोल में connectDragSource मुद्रित

वास्तविक व्यवहार
कुछ भी प्रस्तुत नहीं किया गया है, कंसोल खाली है

wontfix

स्रोत

pie6k

👍5

सबसे उपयोगी टिप्पणी

जैसा कि नीचे दिखाया गया है, मुझे प्रदाता को जोड़ना था:

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

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

theoutlander 2 अक्तू॰ 2018

👍22

सभी 15 टिप्पणियाँ

मेरे साथ भी यही हो रहा है, हालाँकि मैं 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",

अपेक्षित: प्रस्तुत घटक और कंसोल लॉग देखें
वास्तविक: कुछ भी प्रस्तुत नहीं किया गया है; कुछ भी लॉग नहीं है

mvincent7891 16 सित॰ 2018

👍2

मेरे ऐप की जड़ में प्रदाता घटक जोड़ने से समस्या हल हो गई।

मुझे लगता है कि हालांकि - उदाहरण कोड में यह स्पष्ट रूप से नोट किया जाना चाहिए कि इसकी आवश्यकता है - मैंने सोचा कि उदाहरण देखना यह समझने के लिए पर्याप्त है कि पुस्तकालय का उपयोग कैसे शुरू किया जाए

pie6k 17 सित॰ 2018

👍18 🎉1

मुझे लगता है कि समस्या यह है if -कथन:
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

ऐसा लगता है कि यह एक चेक को अक्षम कर देता है जो अन्यथा कोई संदर्भ नहीं होने पर एक त्रुटि फेंक देगा।

jeppester 24 सित॰ 2018

👍3 🎉1

जैसा कि नीचे दिखाया गया है, मुझे प्रदाता को जोड़ना था:

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

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

theoutlander 2 अक्तू॰ 2018

👍22

fyi: पोर्टल का उपयोग करते समय मुझे अभी समस्या का सामना करना पड़ा और पुराने ReactDOM.unstable_renderSubtreeIntoContainer API को ReactDOM.createPortal से बदलकर इसे ठीक कर दिया।

danielberndt 2 जन॰ 2019

समस्या निवारण समस्या निवारण के लिए मैंने बहुत समय क्यों नहीं लगाया, यहां उत्तर मिला, कृपया अपना नमूना कुछ गंभीरता से करें, धन्यवाद

zsirfs 22 जन॰ 2019

रिएक्ट 16.8.1 के खिलाफ उपस्थित होने लगता है, मेरा प्रबंधक कभी नहीं बनाया गया है और Context.Consumer DragSource कभी भी किसी भी बच्चे को प्रस्तुत नहीं करता है।

wldcordeiro 9 फ़र॰ 2019

यह दस्तावेज़ों के त्वरित प्रारंभ अनुभाग में कहीं भी नहीं है।

यह व्यावहारिक रूप से पहली चीज है जो डॉक्स में होनी चाहिए ...

kylebebak 20 फ़र॰ 2019

👍4

यहां वही समस्या है लेकिन केवल कुछ उत्पादन के तहत (मैंने सुनिश्चित किया है कि DragDropContextProvider मेरे पेड़ में मौजूद था)। मैंने देखा कि प्रतिक्रिया देव उपकरण का उपयोग करते समय DragDropContextProvider खो जाता है और घटक पेड़ में Unknown रूप में प्रकट होता है (स्क्रीनशॉट देखें)
Screen Shot 2019-03-14 at 2 31 16 AM

v7.3.2 से डाउनग्रेड करके

"प्रतिक्रिया-डीएनडी": "7.1.0",
"react-dnd-html5-backend": "7.1.0"

मेरे लिए इसे ठीक करता है।

sballesteros 14 मार्च 2019

मुझे भी उसी बग का सामना करना पड़ा।
विकास में प्रदर्शित लेकिन उत्पादन में नहीं।

यह मेरा पर्यावरण है।

"प्रतिक्रिया-डीएनडी"： "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')
  );
};

スクリーンショット 2019-03-22 17 13 46

ड्रैगड्रॉपकॉन्टेक्स्टप्रोवाइडर अज्ञात है

pokotyan 22 मार्च 2019

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।

stale[bot] 6 जुल॰ 2019

क्या किसी को पता है कि इसे स्वचालित रूप से बंद होने से पहले हल किया गया है?

sballesteros 6 जुल॰ 2019

मैंने कैसे हल किया है
मेरे मामले में, सभी ने देव में ठीक काम किया, लेकिन उत्पादन में पूरी तरह से टूट गया।

समस्या यूजड्रैग आयात पथ द्वारा उत्पन्न हुई थी ...

काम नहीं कर रहा आयात
import {useDrag} from "react-dnd/lib/index";

कार्य आयात
import {useDrag} from "react-dnd";

उस ने कहा, मैं वास्तव में नहीं जानता कि पहला आयात कैसे हुआ।

साथ ही, मैं सुरक्षित रूप से कह सकता

संदर्भ:

"प्रतिक्रिया": "^16.8.3",
"react-dnd": "^9.0.1",
"react-dnd-html5-backend": "^9.0.0",

devcastoro 20 जुल॰ 2019

stale[bot] 19 सित॰ 2019

अभी तक कोई समाधान? इस विषय में सुझाए गए कुछ भी मदद नहीं की।

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

सब कुछ ठीक काम करता है जब मैं राज्य की स्थिति बदलता हूं, जब मैं कंसोल लॉग में परिवर्तन देख सकता हूं तो मैं रेंडर नहीं देख सकता।

aminnoura 30 सित॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React-dnd: ड्रैग सोर्स बिल्कुल भी रेंडर नहीं हो रहा है

सबसे उपयोगी टिप्पणी

सभी 15 टिप्पणियाँ

संबंधित मुद्दों