2 
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 对象的 left 属性，它会按预期显示当前鼠标位置，但不会更改渲染方法中 span 的样式。

任何帮助，将不胜感激。提前致谢。

4

1 回答 1

2

仅更改 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);

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

于 2017-08-20T22:57:33.223 回答