Question

我有一个有趣的问题，我是（React-Table）的新手，我有一个不确定的要求。

我希望渲染Form.Group，以便它显示txName列的值，但是，单击单元格时，我想重定向到隐藏的txName列的值。

到目前为止，这就是我所拥有的，我希望使用txId来告诉react-table使用哪个列。

我要通过的列。

fgpBinder

我尝试过的代码，我正在获取日志中的"dumbColumns": [ { accessor: "icpNumber", Header: "ICP", minWidth: 210 }, { accessor: "icpStatus", Header: "Status", minWidth: 180 }, { accessor: "lvCircuit", Header: "LV Circuit", minWidth: 120 }, { accessor: "txId", fgpBinder: "txName", label: "txName" , Header:"Transformer", id : "txId", minWidth : 140 }, { accessor: "txName", fgpBinder: "txId" , label: "txId" , Header:"Transformer", id: "txId", minWidth: 140, show: false }, { accessor: "txRating", Header: "Transformer Rating", minWidth: 80 }, { accessor: "fdrId", Header: "Feeder", minWidth: 180 }, { accessor: "zsId", Header: "Zone Substation", minWidth: 180 }, { accessor: "gxpId", Header: "GXP", minWidth: 140 }, { accessor: "anzsic", Header: "anzsic", minWidth: 100 }, { accessor: "address", Header: "ICP Address", minWidth: 410 } ];和txName数据

txId

此处的函数有效，并使用值“ txData”填充单元格，但是我想要buildData(data){ data.forEach(element => { console.log(element) }); return data; }的值

txdata

例如，txName可以为buildColumns(data){ data.forEach(element => { if(element["fgpBinder"]){ console.log(element) element["Cell"] = row => ( <span>{element.fgpBinder}</span> ) } // element["Cell"] = row => ( // <a href="https://www.google.com"> // CLICK ME // </a> // ) }); return data; } 并且txId可以为foo

我想显示www.bah.com，但是当我单击该单元格时，将被重定向到foo

Answer 1

要处理具有特定行为的列，您需要在列属性中添加道具Cell，在其中指定如何呈现值。

要显示标题为Transformer且值为txName和链接为txId的列，请按如下所示初始化您的列：

buildColumns (columns) {
  let finalColumns = [];
  finalColumns = columns.map(column => {
    let finalColumn = {
      Header: column.Header,
      accessor: column.accessor,
      label: column.label,
      id: column.id,
      minWidth: column.minWidth,
      show: column.show
    }
    // CASE : fgpBinder exists, which implies a special Cell content
    if (column.fgpBinder) {
        finalColumn.Cell = (row) => (
          <a href={row.original[column.fgpBinder]}>{row.value}</a>
        );
    }
    return finalColumn;  
  });

  return finalColumns;
}

这是通用列构造。如果只想用标题Transformer指定列，则只需要像这样初始化该列：

{
  Header: "Transformer",
  id: "txId",
  accessor: "txName",
  Cell: row => <a href={row.original.txId}>{row.value}</a>,
  fgpBinder: "txId",
  label: "txId",
  minWidth: 140,
}

React Table，显示来自访问器的数据，来自另一列的自定义呈现

1 个答案: