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

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

Answer 1

只是更改React中使用的变量的值不会强制重新渲染 - 只需更改newStyle的值就不会做任何事情。要让React组件重新渲染，你需要a）调用setState或b）调用forceUpdate。

你可以做什么而不是在悬停时使用新样式进行更新将是将其添加到状态，然后在悬停功能中操纵该状态，可能是这样的：< / p>

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（），这实际上会强制组件重新呈现。＆＃39;组分＆＃39;在这个实例中实际上是对组件实例的引用，因此如果您需要读取状态以执行其他操作，您也可以从中访问它的状态。如果您想更好地了解自己做错了什么，请查看React生命周期文档的这一部分：https://facebook.github.io/react/docs/react-component.html#setstate

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

1 个答案: