React DnD:避免使用findDOMNode

Question

我不完全理解它,但显然不建议使用findDOMNode().

我正在尝试创建拖放组件,但我不确定如何从组件变量访问refs.这是我目前拥有的一个例子:

const cardTarget = {
    hover(props, monitor, component) {
        ...
        // Determine rectangle on screen
        const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
        ...
    }
}

资源

编辑

它可能是由我的组件既是拖放源和目标引起的,因为我可以让它在这个例子中工作但不是这个.

Answer 1

假设您正在使用es6类语法和最新版本的React(15,在撰写本文时),您可以在您共享的链接上附加一个回调参考,就像Dan在他的示例中所做的那样.来自文档:

当ref属性用于HTML元素时,ref回调接收底层DOM元素作为其参数.例如,此代码使用ref回调来存储对DOM节点的引用:

<h3
    className="widget"
    onMouseOver={ this.handleHover.bind( this ) }
    ref={node => this.node = node}
>

然后,您可以像我们以前与老朋友一样访问节点,findDOMNode()或者getDOMNode():

handleHover() {
  const rect = this.node.getBoundingClientRect(); // Your DOM node
  this.setState({ rect });
}

在行动:https: //jsfiddle.net/ftub8ro6/

编辑:

因为React DND在幕后做了一些魔术,我们必须使用他们的API来获取装饰组件.它们提供了getDecoratedComponentInstance()所以你可以获得底层组件.一旦你使用它,你可以得到component.node预期的:

hover(props, monitor, component) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;
    const rawComponent = component.getDecoratedComponentInstance();
    console.log( rawComponent.node.getBoundingClientRect() );
    ...

这是在行动:

https://jsfiddle.net/h4w4btz9/2/