Question

我正在将一个项目从react-smooth-dnd过渡到react-beautiful-dnd。重写代码（过去曾经成功完成过）时，我不断收到“原始错误：不变失败：Draggable需要draggableId”或“ Droppable：检测到不受支持的嵌套滚动容器”。为什么会这样？

我尝试多次重写代码，以查看是否是语法错误。我查看了过去编写的示例，并浏览了react-beautiful-dnd Github页面上托管的文档。我尝试将元素的较大部分移至新组件，但这没有帮助。我的同事们也无法理解正在发生的事情。

这是将结果发送到项目另一部分的return语句。我已经检查过，而其他部分则不使用smooth-dnd。

      <DragDropContext onDragEnd={onDragEnd}>
         <div className="row">
            <div className="col-xs-12">
               {renderOptions()}
               <div className="col-xs-12 col-sm-7">
                  <Button line fullWidth className="margin-top-s" onClick={addOption}>
                     <IconAddSmall />
                     Add Option
               </Button>
               </div>
            </div>
         </div>
      </DragDropContext>

这是我为react-beautiful-dnd编写的代码

   const renderOptions = (): JSX.Element => {
      return (
         <Droppable droppableId="options-list">
            {provided => (
               <div
                  ref={provided.innerRef}
                  {...provided.droppableProps}>
                  {options.map((option, index) => (
                     <Draggable key={option.key} draggableId={option.key} index={index}>
                        {provide => (
                           <div
                              ref={provide.innerRef}
                              {...provide.draggableProps}
                              {...provide.dragHandleProps}>
                              <div className="row">
                                 <div className="col-xs-12" key={index}>
                                    <div className="row bottom-xs row-duplicate">
                                       <div className="col-xs-12 col-sm-1 order-number">
                                          {index + 1}
                                       </div>
                                       <div className="col-xs-12 col-sm-10">
                                          <AccentTextbox
                                             className="margin-top-s"
                                             name="data"
                                             placeholder=""
                                             value={option.data}
                                             onChange={e => editOption(option.key, 'data', e.target.value)}
                                             language={language}
                                          />
                                       </div>
                                       <div className="col-xs-12 col-sm-1 duplicate-field-close" >
                                          <div className="delete-row" >
                                             <IconCloseSmall onClick={() => removeOption(option.key)} />
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        )}
                     </Draggable>
                  ))}
                  {provided.placeholder}
               </div>
            )}
         </Droppable>

这是我的onDragEnd函数，似乎使事情更加混乱

 const onDragEnd = (result): void => {
      if (!result.destination) {
         return;
      }

      const updatedOptions = [...options];
      const removed = updatedOptions.splice(result.source.index, 1);
      updatedOptions.splice(result.destination.index, 0, removed);

      indexDeep(updatedOptions);
      handleItemUpdate({ options: updatedOptions });
   };

根据典型的react-beautiful-dnd示例，文本框应从列表中的一个位置平稳过渡到另一个位置。相反，整个容器将移动，否则容器将在选定的框内移动。

如何在React-Beautiful-DND中获得与React-Smooth-DND中相同的结果？

0 个答案: