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

嗨，我有这样的类组件

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

style={{opacity: (monitor.isDraging() === true) ? 0 : 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>

const ref=useRef（null）；
常量[{isDraging}，拖动]=使用拖动({
项目,，
收集：（监视器：DragSourceMonitor）=>({
isDraging:monitor.isDraging（）
}),
});
阻力（参考）；
返回示例

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