防止 React 表在更新时滚动到顶部答案

【问题标题】：Prevent React table from scrolling to top on update防止 React 表在更新时滚动到顶部
【发布时间】：2022-01-08 12:04:20
【问题描述】：

我有一个反应表，其中包含我的 Electron 应用程序中的信息。但是，每当更新表格中的数据或单击按钮时，表格就会滚动到顶部，这让用户感到沮丧。

示例代码如下：

const tableContent = listItem.map((item: any, index: number) => {
      
      return (
        <Tr key={index.toString()} className="section">
          <Td>{item.<item1>}</Td>
          <Td>
              <Icon
                onClick={() => exampleFunction()}
              />
          </Td>
        </Tr>
      );
});

return (
       <Div className="round-card page-content-table table-responsive padding-20">
            {<Table className="table table-striped">
                <Thead>
                  <Tr>
                    <Th>TH1</Th>...
                    <Th>TH2</Th>
                  </Tr>
                </Thead>
                {<Tbody>{tableContent}</Tbody>}
              </Table>}
       </Div>)

如何在更新期间避免元素中的这些滚动跳转？

更新：

我能够获取要保存的滚动位置，但是，当表格更新时，滚动会卡在前一点，从而使用户在表格更新时无法滚动。有什么办法可以避免这种情况？

const [scrollPostion, setScrollPosition] = useState(
      parseInt(localStorage.getItem('scrollPos')) || 0
    );
    const TableRef = useRef(null);

    const scrollEvent = (e) => {
      setScrollPosition(e.target.scrollTop);
      localStorage.setItem('scrollPos', scrollPostion.toString());
    };

    React.useEffect(() => {
      localStorage.setItem('scrollPos', scrollPostion.toString());
    }, [scrollPostion]);

【问题讨论】：

您可以在组件状态或 localStorage 中跟踪滚动位置，并在数据重新加载时滚动回它。
@thegman1001 你有任何示例实现吗？无法正常工作。
@thegman1001 我能够使用以下代码获得滚动位置const scrollEvent = (e) => { console.log(e.target.scrollTop); if (e.target.scrollTop != 0) { console.log('Scroll Pos Updated', e.target.scrollTop); setScrollPosition(e.target.scrollTop); } // setScrollPosition(e.target.scrollTop); }; 但是，当我执行以下操作时，位置保持在顶部：useEffect(() => { TableRef.current.scrollTo = scrollPostion; }, [6]);

标签： javascript node.js reactjs electron

【解决方案1】：

对于将来遇到此问题的任何人，我通过将表格移动到新组件并将其放入 div 来解决

const myTable = () => {
   const tableContent = listItem.map((item: any, index: number) => {
      
      return (
        <Tr key={index.toString()} className="section">
          <Td>{item.<item1>}</Td>
          <Td>
              <Icon
                onClick={() => exampleFunction()}
              />
          </Td>
        </Tr>
      );
  };

 return (
       <Table className="table table-striped">
                <Thead>
                  <Tr>
                    <Th>TH1</Th>...
                    <Th>TH2</Th>
                  </Tr>
                </Thead>
                {<Tbody>{tableContent}</Tbody>}
              </Table>}
)

}


const pageContent = () = {
    return (
      <Div className="round-card page-content-table table-responsive padding-20">
            <myTable></myTable>
       </Div>)
    )

}

【讨论】：