大家好,我有一个关于 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: [],
}
})