React-dnd: カスタムドラッグレイヤーは、HTMLスタイルとカスタムレイヤーの両方を表示します

作成日 2017年05月16日  ·  3コメント  ·  ソース: react-dnd/react-dnd

こんにちは。カスタムドラッグレイヤーがカスタムスタイルとHTML定義スタイルの両方でレンダリングされているという問題があります。 同時に、「更新の移行中にsetStateを呼び出すことはできません」という警告が表示されます。

これが私のコードです:

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);

警告は次のとおりです。

警告:setState(...):既存の状態遷移中( renderまたは別のコンポーネントのコンストラクター内など)は更新できません。 レンダリングメソッドは、小道具と状態の純粋関数である必要があります。 コンストラクターの副作用はアンチパターンですが、 componentWillMount移動できます。

これが私の側のエラーなのか、ライブラリの最後のエラーなのか疑問に思います。
ありがとう!

最も参考になるコメント

ItemDragPreviewのコードはどのように見えますか? DragSourceコンポーネントをレンダリングしようとしたときに、この問題が発生しました。

ItemDragPreviewがDragSourceでもないことを確認してください。 ItemDragPreview内で状態を管理している場合は、それも無効にしてみてください。 基本的に、そのコンポーネント内のhtml / jsxを除いてすべてを削り取ります。 そのきれいなスレートから始めて、それから物事を一つずつそれに戻します。

全てのコメント3件

ItemDragPreviewのコードはどのように見えますか? DragSourceコンポーネントをレンダリングしようとしたときに、この問題が発生しました。

ItemDragPreviewがDragSourceでもないことを確認してください。 ItemDragPreview内で状態を管理している場合は、それも無効にしてみてください。 基本的に、そのコンポーネント内のhtml / jsxを除いてすべてを削り取ります。 そのきれいなスレートから始めて、それから物事を一つずつそれに戻します。

コネクタのドラッグプレビューも変更する必要がありました。 今はすべて良い

私もこの問題を抱えていますが、「コネクタ内」とはどういう意味ですか?

このページは役に立ちましたか?
0 / 5 - 0 評価