0

我正在开发一个以表格格式显示数据的反应应用程序。我正在使用 react-table 来格式化数据。我想让其中一个单元格成为项目描述页面的链接。我不希望整行都是“可点击的”。我正在从后端服务器检索数据以填充行。下面是我的反应代码的副本：

import React, { useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useTable } from 'react-table';
import { Table } from 'react-bootstrap';
import { PROJECT_COLUMNS } from '../columns/columns';
import { projectsDetails } from '../actions/projectActions';

import Button from '../components/Button';

const ProjectSummary = () => {
  const dispatch = useDispatch();

  const projectDetails = useSelector(state => state.projectDetails);
  const { loading, error, projects } = projectDetails;

  useEffect(() => {
    dispatch(projectsDetails());
  }, [dispatch]);

  const columns = useMemo(() => PROJECT_COLUMNS, []);
  const data = useMemo(() => projects, []);

  const tableInstance = useTable({
    columns,
    data
  });

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = tableInstance;

  console.log(data._id);

  return (
    <Table
      striped
      className='table-responsive-sm table-responsive-md'
      {...getTableProps()}
    >
      <thead>
        {headerGroups.map(headerGroups => (
          <tr {...headerGroups.getHeaderGroupProps()}>
            {headerGroups.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
};

export default ProjectSummary;

这是它们映射的列。

import Moment from 'react-moment';
import { Link } from 'react-router-dom';

export const PROJECT_COLUMNS = [
  {
    Header: 'Status',
    accessor: 'status'
  },
  {
    Header: 'Name',
    accessor: 'name'
  },
  {
    Header: 'Project Id',
    accessor: 'projectId'
  },
  {
    Header: 'Start Date',
    accessor: 'startDate',
    Cell: ({ row }) => <Moment format='MM/DD/YYYY'></Moment>
  },
  {
    Header: 'End Date',
    accessor: 'endDate',
    Cell: ({ row }) => <Moment format='MM/DD/YYYY'></Moment>
  },

  {
    Header: 'Type',
    accessor: 'type'
  },
  {
    Header: 'Location',
    accessor: 'state'
  }
];
4

1 回答 1

0 
{
    Header: 'Link',
    accessor: [link],
    Cell: props => <a href="url"> project details</a>
}

如果您不想硬编码 url，因为它存在于您的数据中，请使用 props.original.row.nameOfUrlProperty

于 2020-11-17T19:49:37.043 回答