React-dnd: Lapisan Seret Kustom Menunjukkan gaya HTML dan Lapisan Kustom

Dibuat pada 16 Mei 2017  ·  3Komentar  ·  Sumber: react-dnd/react-dnd

Hai, Saya memiliki masalah ketika lapisan seret khusus saya dirender dengan gaya yang ditentukan khusus dan HTML saya. Pada saat yang sama saya diperingatkan bahwa "setState tidak dapat dipanggil selama transisi pembaruan".

Ini kode saya:

import React from 'react';
import PropTypes from 'prop-types';
import { DragLayer } from 'react-dnd';

import ItemDragPreview from './ItemDragPreview';

const layerStyles = {
    position: 'fixed',
    pointerEvents: 'none',
    zIndex: 200000
};

function getItemStyles(props){
    const {initialOffset, currentOffset} = props;

     if (!initialOffset || !currentOffset) {
        return {
        display: 'none'
        };
    }

    let {x,y} = currentOffset;
    const transform = `translate(${x}px,${y}px)`;
    return{
        transform
    };
}

class CustomDragLayer extends React.Component{
    static propTypes = {
        item: PropTypes.object,
        itemType: PropTypes.string,
        initialOffset: PropTypes.shape({
            x: PropTypes.number.isRequired,
            y: PropTypes.number.isRequired
        }),
        currentOffset: PropTypes.shape({
            x: PropTypes.number.isRequired,
            y: PropTypes.number.isRequired
        }),
        isDragging: PropTypes.bool.isRequired,
    }

    renderItem(type,item){
        return (<ItemDragPreview ruleitem={item}/>);
    }

    render(){
        const {item,itemType,isDragging} = this.props;
        if(!isDragging){
            return null;
        }

        return (
            <div style={layerStyles}>
                <div style={getItemStyles(this.props)}>
                    {this.renderItem(itemType,item)}
                </div>
            </div>
        );
    }

}

let collect = monitor =>{
    return {
        item: monitor.getItem(),
        itemType: monitor.getItemType(),
        currentOffset: monitor.getSourceClientOffset(),
        initialOffset: monitor.getInitialSourceClientOffset(),
        isDragging: monitor.isDragging()
    };
}

export default DragLayer(collect)(CustomDragLayer);

Berikut peringatannya:

Peringatan: setState(...): Tidak dapat memperbarui selama transisi status yang ada (seperti dalam render atau konstruktor komponen lain). Metode render harus merupakan fungsi murni dari props dan state; efek samping konstruktor adalah anti-pola, tetapi dapat dipindahkan ke componentWillMount .

Saya bertanya-tanya apakah ini kesalahan saya atau di ujung perpustakaan.
Terima kasih!

Komentar yang paling membantu

Seperti apa kode untuk ItemDragPreview? Saya mengalami masalah ini ketika mencoba membuat komponen DragSource.

Pastikan ItemDragPreview juga bukan DragSource. Jika Anda mengelola status dalam ItemDragPreview, coba nonaktifkan juga. Pada dasarnya mencukur semuanya KECUALI html/jsx di dalam komponen itu. Mulailah dengan yang bersih, lalu tambahkan semuanya kembali satu per satu.

Semua 3 komentar

Seperti apa kode untuk ItemDragPreview? Saya mengalami masalah ini ketika mencoba membuat komponen DragSource.

Pastikan ItemDragPreview juga bukan DragSource. Jika Anda mengelola status dalam ItemDragPreview, coba nonaktifkan juga. Pada dasarnya mencukur semuanya KECUALI html/jsx di dalam komponen itu. Mulailah dengan yang bersih, lalu tambahkan semuanya kembali satu per satu.

Ternyata saya harus mengubah pratinjau seret di konektor juga. Semuanya baik-baik saja sekarang

Saya punya masalah ini juga, apa maksudmu "di konektor"?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat