React-dnd: 添加对 React 16.3 createRef 类型的 ref 的支持

创建于 2018-04-03 · 13评论 · 资料来源: react-dnd/react-dnd

将 connectDragSource 与使用新 createRef API（在 React 16.3.0 中引入）而不是回调引用的元素一起使用会导致应用程序崩溃并显示错误： TypeError: previousRef is not a function 。

https://github.com/facebook/react/pull/12162

enhancement

资料来源

janpe

👍41

最有用的评论

同样的问题。我应该恢复使用旧的回调引用，还是有办法解决这个问题？

im-martijn 于 2018-07-30

👍9

所有13条评论

这是浏览器输出的内容：

    return (0, _react.cloneElement)(element, {
        ref: function ref(node) {
            newRef(node);

            if (previousRef) {
                previousRef(node); // << fails with new refs
            }
        }
    });

TeoTN 于 2018-04-03

👍1

同样的问题。我第一次终于有机会使用新的 refs 并且 react-dnd 妨碍了我。

长期而言，我不确定使用 findDOMNode 和替换 ref 的整个 react-dnd 模型。当 React 有新的 createRef 和 withRef 时。新的forwardRef API 。许多 API 开始使用渲染道具。

但是现在检查 previousRef 是否是一个具有current属性的对象并设置它而不是将其作为函数调用就足够了。

dantman 于 2018-04-06

任何人都对此有任何解决方案，同时仍在使用 createRef()？

MattBubernak 于 2018-06-13

稍后我可以深入研究这个问题，但是展示您正在寻找的内容的沙箱在这里会很棒。

darthtrevino 于 2018-06-13

我也面临同样的问题。
@darthtrevino https://codesandbox.io/s/733onvqwl6也许这个沙箱有帮助。

dhruvparmar372 于 2018-07-01

同样的问题。我应该恢复使用旧的回调引用，还是有办法解决这个问题？

im-martijn 于 2018-07-30

👍9

+1
使用React.createRef()和ref.current使应用程序崩溃。

这个什么时候能修好？

markvital 于 2018-10-03

仍然没有固定：/

AlexChrisF 于 2018-10-23

我会在 react-conf 之后花一些时间来研究这个

darthtrevino 于 2018-10-23

❤4

通过将 ref div 封装在另一个空白 div 中，我能够使用建议的解决方法。
例子：

 <div>
        <div
          style={{
            position: "relative",
            borderStyle: "dashed",
            width: 300,
            height: 200,
            position: "relative"
          }}
          ref={this.myRef}
        />
      </div>