我正在開發一個帶有 React 和 Redux 鉤子的專案。它具有遞回嵌套的看板。當您將新卡片添加到一直向右滾動的看板列時，組件會重新渲染并將看板板猛拉回 x=0, y-0 滾動。滾動的不是視窗。它是看板的父元素。
有誰知道您需要如何重新構建 List 組件（或代碼的任何其他部分），以便您可以將卡片添加到列（位于滾動容器中），而不會破壞滾動位置？
感謝您的任何指點！
我嘗試使用 ref 在調度之前獲取滾動 div 的滾動位置以添加新卡，然后在調度添加卡后再次設定該位置；但這沒有用。
redux state 上的資料是：
listSlice.js
串列節點：
{
"0": {
"text": "board-one",
"id": 0,
"view": "board",
"childIds": [
100,
101,
102,
103,
104
],
"parentId": null,
"order": 0,
"isExpanded": true
},
"1": {
"text": "board-two",
"id": 1,
"view": "board",
"childIds": [
200,
201,
202,
203,
204
],
"parentId": null,
"order": 1,
"isExpanded": true
},
"2": {
"text": "board-three",
"id": 2,
"view": "board",
"childIds": [
300,
301,
302,
303,
304
],
"parentId": null,
"order": 2,
"isExpanded": true
},
"3": {
"text": "board-four",
"id": 3,
"view": "board",
"childIds": [
400,
401,
402,
403,
404
],
"parentId": null,
"order": 3,
"isExpanded": true
},
"100": {
"text": "backlog",
"id": 100,
"childIds": [
1000,
1001
],
"view": "column",
"order": 0,
"isExpanded": true
},
"101": {
"text": "to do",
"id": 101,
"childIds": [
2000,
2001
],
"view": "column",
"order": 1,
"isExpanded": true
},
"102": {
"text": "in progress",
"id": 102,
"childIds": [
3000,
3001
],
"view": "column",
"order": 2,
"isExpanded": true
},
"103": {
"text": "blocked",
"id": 103,
"childIds": [
4000,
4001
],
"view": "column",
"order": 3,
"isExpanded": true
},
"104": {
"text": "complete",
"id": 104,
"childIds": [
5000,
5001
],
"view": "column",
"order": 4,
"isExpanded": true
},
"200": {
"text": "backlog",
"id": 200,
"childIds": [
1000,
1001
],
"view": "column",
"order": 0,
"isExpanded": true
},
"201": {
"text": "to do",
"id": 201,
"childIds": [
2000,
2001
],
"view": "column",
"order": 1,
"isExpanded": true
},
"202": {
"text": "in progress",
"id": 202,
"childIds": [
3000,
3001
],
"view": "column",
"order": 2,
"isExpanded": true
},
"203": {
"text": "blocked",
"id": 203,
"childIds": [
4000,
4001
],
"view": "column",
"order": 3,
"isExpanded": true
},
"204": {
"text": "complete",
"id": 204,
"childIds": [
5000,
5001
],
"view": "column",
"order": 4,
"isExpanded": true
},
"300": {
"text": "backlog",
"id": 300,
"childIds": [
1000,
1001
],
"view": "column",
"order": 0,
"isExpanded": true
},
"301": {
"text": "to do",
"id": 301,
"childIds": [
2000,
2001
],
"view": "column",
"order": 1,
"isExpanded": true
},
"302": {
"text": "in progress",
"id": 302,
"childIds": [
3000,
3001
],
"view": "column",
"order": 2,
"isExpanded": true
},
"303": {
"text": "blocked",
"id": 303,
"childIds": [
4000,
4001
],
"view": "column",
"order": 3,
"isExpanded": true
},
"304": {
"text": "complete",
"id": 304,
"childIds": [
5000,
5001
],
"view": "column",
"order": 4,
"isExpanded": true
},
"400": {
"text": "backlog",
"id": 400,
"childIds": [
1000,
1001
],
"view": "column",
"order": 0,
"isExpanded": true
},
"401": {
"text": "to do",
"id": 401,
"childIds": [
2000,
2001
],
"view": "column",
"order": 1,
"isExpanded": true
},
"402": {
"text": "in progress",
"id": 402,
"childIds": [
3000,
3001
],
"view": "column",
"order": 2,
"isExpanded": true
},
"403": {
"text": "blocked",
"id": 403,
"childIds": [
4000,
4001
],
"view": "column",
"order": 3,
"isExpanded": true
},
"404": {
"text": "complete",
"id": 404,
"childIds": [
5000,
5001
],
"view": "column",
"order": 4,
"isExpanded": true
},
"1000": {
"text": "card-one",
"id": 1000,
"childIds": [],
"order": 0,
"isExpanded": true,
"view": "card"
},
"1001": {
"text": "card-two",
"id": 1001,
"childIds": [],
"order": 1,
"isExpanded": true,
"view": "card"
},
"2000": {
"text": "card-one",
"id": 2000,
"childIds": [],
"order": 0,
"isExpanded": true,
"view": "card"
},
"2001": {
"text": "card-two",
"id": 2001,
"childIds": [],
"order": 1,
"isExpanded": true,
"view": "card"
},
"3000": {
"text": "card-one",
"id": 3000,
"childIds": [],
"order": 0,
"isExpanded": true,
"view": "card"
},
"3001": {
"text": "card-two",
"id": 3001,
"childIds": [],
"order": 1,
"isExpanded": true,
"view": "card"
},
"4000": {
"text": "card-one",
"id": 4000,
"childIds": [],
"order": 0,
"isExpanded": true,
"view": "card"
},
"4001": {
"text": "card-two",
"id": 4001,
"childIds": [],
"order": 1,
"isExpanded": true,
"view": "card"
},
"5000": {
"text": "card-one",
"id": 5000,
"childIds": [],
"order": 0,
"isExpanded": true,
"view": "card"
},
"5001": {
"text": "card-two",
"id": 5001,
"childIds": [],
"order": 1,
"isExpanded": true,
"view": "card"
}
}
listSlice.js
list.visibleIds：
[
"0",
"1",
"2",
"3"
]
組件：（ 為了保持示例簡單，列上只有一個添加按鈕。滾動板時會發生錯誤，以查看末尾的列；并且您嘗試在其中一個列中添加卡片結束）。 List.js
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { v4 as uuid } from "uuid";
import {
fetchNodesAsync,
selectVisibleIds,
selectParentId,
addNewNodeAsync,
selectNodes
} from "./listSlice";
import "./List.css";
export function List(props = {}) {
let { isRoot } = props;
const nodes = useSelector(selectNodes);
const visibleIds = useSelector(selectVisibleIds);
const parentId = useSelector(selectParentId);
const dispatch = useDispatch();
useEffect(() => {
if (isRoot) {
dispatch(fetchNodesAsync());
}
}, []);
const renderList = (params) => {
let { ids, parentView } = params;
return (
// This is the element that is scrolled when the error occurs. It is scrolled to the left, so that you can see the last columns in the list:
<ul className={`${parentView || "root"}-container`}>
{ids.map((id) => {
let node = nodes[id];
return (
<li key={uuid()} className={node.view}>
<div className="header">
{node.view === "column" && (
<button
onClick={(e) => {
e.preventDefault();
dispatch(addNewNodeAsync({ parentId: id }));
}}
>
add item
</button>
)}
id: {node.id} {node.text}
</div>
<div className={`${node.view}-scroll`}>
{node.isExpanded &&
node.childIds.length >= 1 &&
renderList({
ids: node.childIds,
parentId: id,
parentView: node.view
})}
</div>
</li>
);
})}
</ul>
);
};
return <ul className="List">{renderList({ ids: visibleIds, parentId })}</ul>;
}
我正在嘗試實作 Dan Abramov 在這里描述的資料結構： https ://github.com/reduxjs/redux/issues/1629
uj5u.com熱心網友回復：
你不能這樣做：<li key={uuid()} ... />因為uuid會在每次渲染時生成一個新的隨機 ID，這將使 React 在每次狀態更改時生成新的 DOM 節點，因此會丟失存盤在先前節點中的滾動量。您應該<li key={id} ... />改用，以便 ID 保持不變。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/444591.html