AutoSizer 和 Chakra 不能一起工作

问题描述

我正在尝试创建一个表，它接受来自 AutoSizer 的输入，同时还有一个滚动条（通过使用 Box 框架中的 chakra-ui）。

在下面的代码中，它将显示一个空白页面。但是，如果我注释掉 AutoSizer 的使用，它会按预期显示。此外，如果我注释掉 Box，它会按预期显示。只有当 Autosizer 和 Box 一起使用时，它不起作用。这里会发生什么？

    <AutoSizer>
      {({ height,width }) => (
        <Box overflowX="auto" overflowY="auto">
        <Table>
          <Thead>
            {columns.map((col,i) => (
              <Th>{`Th ${i + 1}`}</Th>
            ))}
          </Thead>
          <Tbody>
            <Tr>
              {columns.map((col,i) => (
                <Td>{`Td ${i + 1}`}</Td>
              ))}
            </Tr>
          </Tbody>
        </Table>
        </Box>
      )}
    </AutoSizer>

代码如下：

https://codesandbox.io/s/responsive-table-forked-figk7?file=/src/ResponsiveTable.tsx

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）