2

我正在使用 react-table (7.5.0) 在应用程序中呈现一些表。

我已经混淆并精简了我的代码，因此可能存在缺少括号或不正确的语法。

在一个简单的层面上，我有一行，两列。每列都有一个很长的描述，它被缩短，然后有一个“显示更多”按钮来切换一个带有完整描述的新行。

我的列定义如下：

{
id: "column1",
Header: "column1",
accessor: "column1",
Cell: (props) =>
    <div>
      <p>{props.value}</p>

      <a
        {...props.row.getToggleRowExpandedProps({})}
      >
        Show More
      </a>
    </div>
},
{
  id: "column2",
  Header: "column2",
  accessor: "column2",
  Cell: (props) =>
    <div>
      <p>{props.value}</p>

      <a
        {...props.row.getToggleRowExpandedProps({})}
      >
        Show More
      </a>
    </div>
}

我的 react-table 组件及其子组件如下：

{page.map((row, i) => {
prepareRow(row);
return (
  <>
    <tr
      {...row.getRowProps()}
      
    >
      {row.cells.map((cell) => {
        return (
          <td
            data-label={cell.column.Header}
           
            {...cell.getCellProps()}
          >
            <p
              
            >
              {cell.render("Cell")}
            </p>
          </td>
        );
      })}
    </tr>
    {row.isExpanded ? (
      <tr
        
      >
        <td
          
          colSpan={12}
        >
          {renderRowSubComponent({ row })}
        </td>
      </tr>
    ) : null}
  </>
);
})}

子组件

  const renderRowSubComponent = React.useCallback(
({ row }) => (
  <div
    dangerouslySetInnerHTML={{ __html: row.values.column1}}
  ></div>
),
[]
);

如您所见，在子组件中，我在展开的行中抓取“row.values.column1”数据并显示它。

这存在一个问题，即单击第二列仍将显示第一列的完整描述。

有没有办法让我根据单击的单元格（即 getToggleRowExpandedProps）来获取子组件中列的访问/ID，然后显示相应单元格的完整描述。

谢谢

4

0 回答 0