reactjs - react-beautiful-dnd:无法在 Draggable 中找到拖动 handle 元素

Question

我有一个组件接收两组数据并且是一个 react-beautiful-dnd DragDropContext 如下所示

 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
.
.
.

Answer 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 并且它有效...