javascript - react DnD : Avoid using findDOMNode

Question

我不完全理解，但显然it isn't recommended to use findDOMNode() .

我正在尝试创建拖放组件，但我不确定应该如何访问组件变量中的引用。这是我目前拥有的示例:

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

Source

编辑

这可能是因为我的组件既是拖放源又是目标，因为我可以让它在 this example 中工作。但不是this one .

Answer 1

假设您使用的是 es6 类语法和最新版本的 React(撰写本文时为 15)，您可以在您共享的链接上附加一个回调引用，就像 Dan 在他的示例中所做的那样。来自 the docs :

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument. For example, this code uses the ref callback to store a reference to a DOM node:

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

然后你就可以像我们以前和老 friend 一样访问该节点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/