0

大家好,我有一个关于 React.memo 的问题。我不知道如何解释我的问题,但我会尝试......现在我正在使用 React-Beautiful-dnd 制作我的看板。

DragDropContext => Dropable(board) => Dragable(board) => Dropable(item) => Dragable(item)

ITEM 中的 React.memo 运行良好。

return (
    <Draggable draggableId={todoId + ""} index={index}>
        {(magic, snapshot) => <Card
            isDragging={snapshot.isDragging}
            {...magic.dragHandleProps}
            {...magic.draggableProps}
            ref={magic.innerRef}
        >
            <TextCard>{todoText}</TextCard>
            <div onClick={onClick}>
                <FontAwesomeIcon icon={["fas", "times"]} />
            </div>
        </Card>}
    </Draggable>
)}export default React.memo(DraggableCard);

但在董事会它不起作用我不知道为什么

 return (
   
    <BoardSub>
        <HeadWrapper>
            
            
            
               <AddTodo board={boardId} />
            
            
                    
             <Btn onClick={onClick}>
                 <FontAwesomeIcon icon={["far", "trash-alt"]} />
             </Btn>
             
            
        </HeadWrapper>
        
        <Droppable droppableId={boardId} type={`droppableSubItem`}>
             {(provided, snapshot) => (
                 <BoardContainer 
                 findDelete={findDelete}
                 draggingFromThisWith={Boolean(snapshot.draggingFromThisWith)} 
                 isDraggingOver={snapshot.isDraggingOver} 
                 {...provided.droppableProps} 
                 ref={provided.innerRef}
                 >
                        {toDos.map((value, index) => {
                            return (
                               <DraggableCard dain={boardId} key={value.id} todoId={value.id} todoText={value.text} index={index} />
                            )
                        })}
                        {provided.placeholder}
                        {/* {findDelete && <DeleteIconContainer><FontAwesomeIcon icon={["far", "trash-alt"]} /></DeleteIconContainer>} */}
                    
                 </BoardContainer>
             )}
        </Droppable>
    </BoardSub>
    )}export default React.memo(Board);

//原子

export const todoAtom = atom<ItodoAtomProps>({
key: "todo",
default : {
    to_do: [],
    doing: [],
    done: [],
   
    
   
}

})

4

0 回答 0