Javascript 反应表，显示访问器中的数据，从另一列自定义呈现

我有一个有趣的问题，我是（）的新手，我有一个不确定如何满足的需求

我希望呈现

txName

，以便它显示txName列的值，但是单击单元格时，我希望重定向到隐藏的

txId

列的值

到目前为止，这就是我所拥有的，我希望使用

fgpBinder

来告诉react表使用哪一列

我要经过的列。

"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数据

buildData(data){
  data.forEach(element => {
    console.log(element)
  });
  return data;
}

这里的函数工作并用值“txData”填充单元格，但是我想要

txData

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

buildColumns（数据）{
data.forEach（元素=>{
if（元素[“fgpBinder”]）{
console.log（元素）
元素[“单元格”]=行=>(
{element.fgpBinder}
)
}
//元素[“单元格”]=行=>(
//   
// )
});
返回数据；
}

例如，txName可以是

foo

txId可以是

www.bah.com

---

我想显示

foo

，但当我单击单元格时，会被重定向到

www.bah.com

要处理具有特定行为的列，您需要向列属性中添加props

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

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

---

事实上，我已经做到了这一点，但是我会测试你的方法，让你知道它是否满足我的问题，这样我就可以给你网络分数：D