react-window:如何使用实际的 table 标签
react-window: How to use actual table tags
我想使用语义 HTML 标签(而不是使用 div)来创建 table 和 react-window。
问题是 List (FixedSizedList) 创建了两个包装器。 另一个称为 outerElementType
并且默认也是 FixedSizedList
的 prop值 div
。这意味着我无法创建正确的 table 结构,并且所有 td
都在第一列中结束。看起来这两个都不能省略。
我该如何解决这个问题?
当前代码:
import { FixedSizeList as List } from "react-window";
...
return (
<table className="CargoListTable">
<CargoTableHead />
<List
height={600}
itemCount={cargoList.length}
itemSize={35}
width={900}
itemData={cargoList}
innerElementType="tbody"
>
{Row}
</List>
</table>
)
const Row: React.FC<RowProps> = ({ index, style, data }) => {
const cargo = data[index];
return (
<tr
style={style}
key={index}
>
<td>{cargo.registrationNumber}</td>
<td>{cargo.pol}</td>
<td>{cargo.pod}</td>
</tr>
);
};
一个可能的解决方案是将整个 table 放在列表中。为此,我们可以使用 react-window 中 sticky-header example 的修改版本。
您可以在此 CodeSandbox 中查看工作示例:https://codesandbox.io/s/wild-dust-jtf42?file=/src/index.js
我们需要两个简单的元素来呈现 StickyRow
和 Row
元素。您可以在此处添加 td
个元素。
const Row = ({ index, style }) => (
<tr className="row" style={style}>
Row {index}
</tr>
);
const StickyRow = ({ index, style }) => (
<tr className="sticky" style={style}>
<th>Sticky Row {index}</th>
</tr>
);
我们将 FixedSizeList
包装在包含粘滞行的上下文中。在这种情况下,只有第一行是粘性的。
const StickyList = ({ children, stickyIndices, ...rest }) => (
<StickyListContext.Provider value={{ ItemRenderer: children, stickyIndices }}>
<List itemData={{ ItemRenderer: children, stickyIndices }} {...rest}>
{ItemWrapper}
</List>
</StickyListContext.Provider>
);
ItemWrapper
使用主渲染函数中传递的方法(即 {Row}
)仅渲染 non-sticky 行。这负责渲染 table 数据。
const ItemWrapper = ({ data, index, style }) => {
const { ItemRenderer, stickyIndices } = data;
if (stickyIndices && stickyIndices.includes(index)) {
return null;
}
return <ItemRenderer index={index} style={style} />;
};
要呈现 table header,我们需要自定义 innerElementType。
const innerElementType = forwardRef(({ children, ...rest }, ref) => (
<StickyListContext.Consumer>
{({ stickyIndices }) => (
<table ref={ref} {...rest}>
{stickyIndices.map(index => (
<StickyRow
index={index}
key={index}
style={{ top: index * 35, left: 0, width: "100%", height: 35 }}
/>
))}
<tbody>
{children}
</tbody>
</table>
)}
</StickyListContext.Consumer>
));
由于上下文,该元素知道粘性索引。并呈现 header 和 body.
如果满足您的需要,此代码可以进一步简化。
我想使用语义 HTML 标签(而不是使用 div)来创建 table 和 react-window。
问题是 List (FixedSizedList) 创建了两个包装器。 另一个称为 outerElementType
并且默认也是 FixedSizedList
的 prop值 div
。这意味着我无法创建正确的 table 结构,并且所有 td
都在第一列中结束。看起来这两个都不能省略。
我该如何解决这个问题?
当前代码:
import { FixedSizeList as List } from "react-window";
...
return (
<table className="CargoListTable">
<CargoTableHead />
<List
height={600}
itemCount={cargoList.length}
itemSize={35}
width={900}
itemData={cargoList}
innerElementType="tbody"
>
{Row}
</List>
</table>
)
const Row: React.FC<RowProps> = ({ index, style, data }) => {
const cargo = data[index];
return (
<tr
style={style}
key={index}
>
<td>{cargo.registrationNumber}</td>
<td>{cargo.pol}</td>
<td>{cargo.pod}</td>
</tr>
);
};
一个可能的解决方案是将整个 table 放在列表中。为此,我们可以使用 react-window 中 sticky-header example 的修改版本。
您可以在此 CodeSandbox 中查看工作示例:https://codesandbox.io/s/wild-dust-jtf42?file=/src/index.js
我们需要两个简单的元素来呈现 StickyRow
和 Row
元素。您可以在此处添加 td
个元素。
const Row = ({ index, style }) => (
<tr className="row" style={style}>
Row {index}
</tr>
);
const StickyRow = ({ index, style }) => (
<tr className="sticky" style={style}>
<th>Sticky Row {index}</th>
</tr>
);
我们将 FixedSizeList
包装在包含粘滞行的上下文中。在这种情况下,只有第一行是粘性的。
const StickyList = ({ children, stickyIndices, ...rest }) => (
<StickyListContext.Provider value={{ ItemRenderer: children, stickyIndices }}>
<List itemData={{ ItemRenderer: children, stickyIndices }} {...rest}>
{ItemWrapper}
</List>
</StickyListContext.Provider>
);
ItemWrapper
使用主渲染函数中传递的方法(即 {Row}
)仅渲染 non-sticky 行。这负责渲染 table 数据。
const ItemWrapper = ({ data, index, style }) => {
const { ItemRenderer, stickyIndices } = data;
if (stickyIndices && stickyIndices.includes(index)) {
return null;
}
return <ItemRenderer index={index} style={style} />;
};
要呈现 table header,我们需要自定义 innerElementType。
const innerElementType = forwardRef(({ children, ...rest }, ref) => (
<StickyListContext.Consumer>
{({ stickyIndices }) => (
<table ref={ref} {...rest}>
{stickyIndices.map(index => (
<StickyRow
index={index}
key={index}
style={{ top: index * 35, left: 0, width: "100%", height: 35 }}
/>
))}
<tbody>
{children}
</tbody>
</table>
)}
</StickyListContext.Consumer>
));
由于上下文,该元素知道粘性索引。并呈现 header 和 body.
如果满足您的需要,此代码可以进一步简化。