reactjs 如何解决React中的恒定失效误差

iklwldmw 于 2023-01-08 发布在 React

关注(0)|答案(2)|浏览(132)

我正在尝试为我的react项目创建一个拖放列表，我使用的是react-beautiful-dnd库，但是我遇到了这个错误：
错误：固定失败：找不到所需的上下文
我发现是可拖动组件引发了此错误

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
   Some code goes in here....
</div>
)}

<Draggable/>

然后我发现了这个github问题：https://github.com/atlassian/react-beautiful-dnd/issues/948根据这里建议的解决方案，我添加了一个样式函数

const getStyle = (style, snapshot, backgroundColor) => {
    return {
      ...style,
      borderBottomColor: backgroundColor,
      backgroundColor: `${backgroundColor}`,
    };
  };

然后将样式添加到div

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} style= 
{getStyle(provided.draggableProps.style, snapshot)>
   Some code goes in here....
</div>
)}
<Draggable/>

但是，我仍然无法解决这个问题...我该怎么做才能解决这个问题？

reactjs

来源：https://stackoverflow.com/questions/65851879/how-to-solve-invarient-failed-error-in-react

2条答案

按热度按时间

vdgimpew1#

我遇到了同样的问题。得出了以下解决方案：
从可拖动文档中🚀，

<Draggable /> components can be dragged around and dropped onto <Droppable />s. 
A <Draggable /> must always be contained within a <Droppable />."

尝试使用Droppable Package Draggable组件，如下所示

<DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="some_id">
          {provided => (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              <Draggable draggableId={props.id} index={props.index}>
                {(provided, snapshot) => (
                  <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                    Some code goes in here....
                  </div>
                )}
              </Draggable>
            </div>
          )}
        </Droppable>
      </DragDropContext>

赞(0）回复(0）举报 2023-01-08

ffx8fchx2#

在dnd-美丽React库中-

a.最外层的组件（即“上下文”）是
B.在内部，存在基本上是我们想要实现拖放设施的区域的组件。
c.在组件内部，存在将被拖放的实际组件。
所以现在看这个例子，react无法在你的代码中找到上下文组件（最外层的组件）。检查一下。
在我的例子中，我有三个地方使用了可删除组件，但我只在一个组件中使用了上下文...所以在另外两个组件中缺少上下文。我只是注解掉了这些组件，现在它运行良好。
你应该在你使用你的可丢弃组件的所有地方包括。

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs 如何解决React中的恒定失效误差

2条答案

相关问题

热门标签

最新问答