React DnD - 开始拖动时如何使项目不透明度为0？答案

【问题标题】：React DnD - How to make item opacity 0 when start dragging?React DnD - 开始拖动时如何使项目不透明度为0？
【发布时间】：2020-07-02 08:42:28
【问题描述】：

嗨，我有这样的类组件

const spec = {
    beginDrag(props, monitor) {
        //Toto by sa dalo nahradit ako new DnDItem ale nevezme to pretoze to musi byt plainObject
        const item = {currentContainerType: props.typeOfContainer, currentArrayPosition: props.orderInContainer};
        return item;
    },
};
const collect = (connect, monitor) => {
    return {
        connectDragSource: connect.dragSource(),
        connectDragPreview: connect.dragPreview(),
        isDragging: monitor.isDragging(),
    };
};


class DnDSource extends React.PureComponent<IProps, IStates> {

    render() {
        const {connectDragSource} = this.props;
        return (
            connectDragSource(
                <div className={'source'} style={{opacity: (monitor.isDraging() === true) ? 0 : 1}}>
                    <TextFlowRenderer fontName={this.props.item.response.fontName}
                                      fontSize={this.props.item.response.fontSize}
                                      formulas={this.props.item.response.formulas}
                                      textToRender={this.props.item.response.response}/>
                </div>,
            )
        );
    }
}

export default DragSource('answer', spec, collect)(DnDSource);

这很好用，除非我需要在开始拖动此项目时使原始部分不透明度 = 0。我是这个库的新手。请问我该怎么做？

如你所见，我尝试了类似的方法

style={{opacity: (monitor.isDraging() === true) ? 0 : 1}}

但这不起作用，因为我无法访问组件中的监视对象。

【问题讨论】：

标签： javascript reactjs typescript react-dnd

【解决方案1】：

您可以从监视器中获取拖动状态：

    const ref = useRef<HTMLDivElement>(null);

    const [{ isDragging }, drag] = useDrag({
        item,
        collect: (monitor: DragSourceMonitor) => ({
            isDragging: monitor.isDragging()
        }),
    });

    drag(ref);
    return <div ref={ref} style={{ opacity: isDragging ? 0 : 1 }}>Example</div>

在拖动 div 时将不透明度设置为 0。

【讨论】：