我们如何将 cellRendererParams 返回的值传递给 ag-grid 中 cellRendererFramework 中的函数？

问题描述

我在 React 应用程序中使用 ag-grid。我需要将 id 传递给 cellRendererFramework 内的函数调用。我可以通过使用 cellRendererParams 正确获取值。但是我如何将它作为参数传递？我应该在我的 id 函数中访问那个 clickable。有没有办法做到这一点？

TickeTable.js

import React from 'react';
import IssueSnippet from './IssueSnippet/IssueSnippet';
import AgGridTable from '../DataTables/AgGridTable/AgGridTable';
import FilterBar from './FilterBar/FilterBar';
import { Archive,ArrowClockwise,Share,Pencil } from 'react-bootstrap-icons';
import moment from 'moment';

import TicketAction from './TicketAction/TicketAction';

import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import 'ag-grid-community/dist/styles/ag-grid.css';
import './TicketTable.scss';

const TicketTable = (props) => {
  const gridOptions = {
    defaultColDef: {
      sortable: true,unSortIcon: true
    },columnDefs: [
      {
        checkBoxSelection: true,maxWidth: 60,sortable: false,unSortIcon: false,headerCheckBoxSelection: true,headerCheckBoxSelectionFilteredOnly: true
      },// {
      //   headerName: 'ID',//   field: 'id',//   maxWidth: 180,//   cellRendererFramework: Clickable,//   cellClass: `cell-id text p3`
      // },{
        headerName: 'ID',field: 'ticketId',maxWidth: 180,cellRendererFramework: Clickable,cellRendererParams(params) {
          console.log(params.data.id);
          return params.data.id;
        },cellClass: `cell-id text p3`
      },],rowHeight: 60
  };

  const refreshFunct = () => {
    window.location.reload();
  };

  let time = props.data.map((item,key) => {
    item.createdTs = moment(item.createdTs).format('L');
  });

  const { data } = props;

  return (
    <div className="ticket-table-wrapper">
      <div className="table-actions">
        <TicketAction
          icon={<ArrowClockwise />}
          tooltip="Refresh"
          onClick={refreshFunct}
        />
        <TicketAction icon={<Archive />} tooltip="Archive" />
        <TicketAction icon={<Share />} tooltip="E-mail" />
        <TicketAction icon={<Pencil />} tooltip="E-mail" />
      </div>
      <FilterBar />
      <AgGridTable
        gridOptions={gridOptions}
        rowHeight={80}
        rowData={data}
        pagination={true}
        paginationPageSize={6}
        rowClass="ticket-row"
      ></AgGridTable>
    </div>
  );
};


};

const Clickable = (props) => {
  let k = props.value;
  console.log(k);
  return <a href={`http://localhost:3002/viewTicket/${k}`}>{props.value}</a>;
};

export default TicketTable;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）