在拖放过程中，如果有任何组件悬停在当前组件上，则当前组件会更改其样式。这不是按预期发生的吗？

Question

import React from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';


let newStyle = {'display':'none','left':'0px'} ;

let target = {
    hover(props,monitor,component){
        newStyle.display = 'block';
        newStyle.left = monitor.getClientOffset().x-findDOMNode(component).getBoundingClientRect().left+'px';
        //The current mouse position where the "on hover indicator" is expected

        return;
    },
    drop(props, monitor,component) {
        newStyle.display = 'none';
        newStyle.left = '0px';
        return props;
    }
}

function collect(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget(),
    };
}

class component extends React.Component { 
    constructor(props){
        super(props);
    }

    render = () => { 
        const { connectDropTarget } = this.props;
        return connectDropTarget(
            <div>
              <Span style = { newStyle }> On hover indicator </span>
              // here another component drops wrapped within div!
            </div>
        )
    }
}

export default DropTarget('type', target, collect)(component);

在悬停回调中，如果我记录我的左侧属性 newStyle 对象，它会按预期显示当前鼠标位置，但不会更改渲染方法中跨度的样式。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

仅更改 React 中使用的变量的值不会强制重新渲染 - 仅更改 newStyle 的值不会执行任何操作。要让 React 组件重新呈现自己，您需要 a) 调用 setState 或 b) 调用 forceUpdate。

你可以做的是让它在悬停时更新为新样式，将其添加到状态，然后在悬停功能中操纵该状态，也许像这样：

import React from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

let target = {
    hover(props,monitor,component) {
        let newStyle = {};
        newStyle.display = 'block';
        newStyle.left = monitor.getClientOffset().x-findDOMNode(component).getBoundingClientRect().left+'px';

        component.setState({ style: newStyle });
        return;
    },
    drop(props, monitor,component) {
        let newStyle = {}
        newStyle.display = 'none';
        newStyle.left = '0px';

        component.setState({ style: newStyle });
        return props;
    }
}

function collect(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget(),
    };
}

class component extends React.Component { 
    constructor(props){
        super(props);
    }

    state = {
      style: { display: 'none', left: '0px' }
    }

    render = () => { 
        const { connectDropTarget } = this.props;
        return connectDropTarget(
            <div>
              <Span style={ this.state.style }> On hover indicator </span>
              // here another component drops wrapped within div!
            </div>
        )
    }
}

export default DropTarget('type', target, collect)(component);

请注意悬停和放置函数中的 component.setState()，这实际上会强制组件重新呈现。 'component' 在这个实例中实际上是对组件实例的引用，因此如果您需要读取状态以执行其他操作，您也可以从中访问它的状态。如果您想更多地了解自己做错了什么，请查看 React 生命周期文档的这一部分：https://facebook.github.io/react/docs/react-component.html#setstate

在拖放过程中，如果有任何组件悬停在当前组件上，则当前组件会更改其样式。这不是按预期发生的吗？

During drag and drop if any component hover over the current component, the current component changes it's style.. This is not happening as expected?

reactjs

redux

react-dnd