react-beautiful-dnd：在 Draggable 中找不到拖动句柄元素答案

【问题标题】：react-beautiful-dnd: Cannot find drag handle element inside of Draggablereact-beautiful-dnd：在 Draggable 中找不到拖动句柄元素
【发布时间】：2019-06-06 17:27:36
【问题描述】：

我有一个接收两组数据的组件，它是一个 react-beautiful-dndDragDropContext如下

 render() {
    let index = -1;
    const dataSetOne = this.props.store!.getdata(1);
    const dataSetTwo = this.props.store!.getData(2);
    const allData = this.props.anotherStore!.getAllData();

    return (
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable droppableId="SIDE_MENU" direction="vertical" type="sections">
            {(provided, snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                onScroll={(e) => e.currentTarget.scrollTop}
              >
                {dataSetOne!.map((a, i) => {
                  index = i;
                  const currentData:any= allData.filter(/*logic*/)
                  return (
                    <MyDraggableComp
                      key={a.id!}
                      aes={a}
                      index={index}
                      data={currentData}
                    />
                  );
                })}
               {dataSetTwo.length > 0 ? (
                <MyDraggableComp
                  key="SOMEKEY"
                  aes={null}
                  index={index + 1}
                  data={dataSetTwo}
                />
                ) : null}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
    );
  }

到目前为止，此代码运行良好，MyDraggableComp 已根据 dnd 实施指南正确实施，并包含 {...sectionProvided.dragHandleProps}

现在已经更改了后端，dataSetTwo 永远不会为 null 或为空，因此想要删除条件并始终呈现它。

但移动dataSetTwo>0 条件并且只有

            <MyDraggableComp
              key="SOMEKEY"
              aes={null}
              index={index + 1}
              data={dataSetTwo}
            />

导致我什至不了解与案例的关系以及要搜索什么的错误？有人可以向我解释发生了什么以及如何解决吗？

Error: Invariant failed: 
      Cannot find drag handle element inside of Draggable.
      Please be sure to apply the {...provided.dragHandleProps} to your Draggable

      More information: https://github.com/atlassian/react-beautiful-dnd#draggable

▼ 21 stack frames were expanded.
invariant
node_modules/tiny-invariant/dist/tiny-invariant.esm.js:11
getDragHandleRef
node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js:6165
DragHandle.componentDidMount
node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js:7351
commitLifeCycles
node_modules/react-dom/cjs/react-dom.development.js:15961
commitAllLifeCycles
node_modules/react-dom/cjs/react-dom.development.js:17262
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:149
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:199
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:256
commitRoot
node_modules/react-dom/cjs/react-dom.development.js:17458
completeRoot
node_modules/react-dom/cjs/react-dom.development.js:18912
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:18841
performWork
node_modules/react-dom/cjs/react-dom.development.js:18749
performSyncWork
node_modules/react-dom/cjs/react-dom.development.js:18723
batchedUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:18936
reactionScheduler
node_modules/mobx/lib/mobx.module.js:3626
runReactions
node_modules/mobx/lib/mobx.module.js:3602
.
.
.

【问题讨论】：

您是否将 {...provided.dragHandleProps} 传递到从 react-beautiful-dnd 导入的 Draggable 组件中？
你能展示你的 Draggable 组件吗？你也应该有 {...provided.droppableProps} 到你的 Draggable。

标签： reactjs drag-and-drop react-tsx react-beautiful-dnd

【解决方案1】：

这是特定于 react-beautiful-dnd 和您的 styled-components 版本的 - 但您是否在控制台中看到此警告？：


The "innerRef" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use "ref" instead like a typical component. "innerRef" was detected on component "styled.div".

我将 Draggable/Droppable 中的 api 更改为使用 ref 而不是 innerRef 并且它有效...

【讨论】：