Reactjs 反应表-切换在两个不同列上展开的行

我使用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>
}

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

{
id:“第1列”，
标题：“第1列”，
访问者：“column1”，
单元：（道具）=>
{props.value}

显示更多
},
{
id:“第2栏”，
标题：“第2列”，
访问者：“第2列”，
单元：（道具）=>
{props.value}

显示更多
}

我的反应表组件及其子组件如下所示：

{
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>
}

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

{page.map（（行，i）=>{
准备工作（世界其他地区）；
返回(
{row.cells.map（（cell）=>{
返回(

{cell.render（“cell”）}

);
})}
{row.isExpanded(
{renderRowSubComponent（{row}）}
)：null}
);
})}

子组件

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

const renderRowSubComponent=React.useCallback(
（{row}）=>(
),
[]
);

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

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

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

谢谢