Reactjs 反应窗口：如何使用实际表标记

我想使用语义HTML标记（而不是使用div）创建一个带有react窗口的表

问题在于列表（FixedSizedList）创建了两个包装。另一个被称为

outRelationType

，也是

FixedSizedList

的一个道具，默认值为

div

。这意味着我无法创建正确的表结构，所有的

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>
  );
};

从“反应窗口”导入{FixedSizeList as List}；
...
返回(
{Row}
)
常量行：React.FC=（{index，style，data}）=>{
const cargo=数据[索引]；
返回(
{货物注册号}
{cargo.pol}
{cargo.pod}
);
};

一种可能的解决方案是将整个表放在列表中。对此，我们可以使用“从反应”窗口的修改版本

您可以在此代码沙盒中查看工作示例：

我们需要两个简单的元素来渲染

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

ItemWrapper

使用主呈现函数中传递的方法（即-

{Row}

）仅呈现非粘性行。这负责呈现表数据

const ItemWrapper = ({ data, index, style }) => {
  const { ItemRenderer, stickyIndices } = data;
  if (stickyIndices && stickyIndices.includes(index)) {
    return null;
  }
  return <ItemRenderer index={index} style={style} />;
};

constitemwrapper=（{data，index，style}）=>{
常量{ItemRenderer，StickyIndexes}=数据；
if（粘滞指数和粘滞指数包括（指数））{
返回null；
}
返回；
};

要呈现表头，我们需要一个自定义的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>
));

const innerElementType=forwardRef（（{children，…rest}，ref）=>(
{（{StickyIndexes}）=>(
{StickyIndexes.map（索引=>(
))}
{儿童}
)}
));

由于上下文的原因，该元素知道粘性索引。并渲染标题和正文

如果这段代码符合您的需要，它可以进一步简化

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