javascript - 防止 React 表在更新时滚动到顶部

Question

我有一个 react 表，其中包含我的 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]);

Answer 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>)
    )

}