Question

我有一个组件的这一部分，我想分开并保持其道具工作。当它在父组件中时，其下面的工作方式。

<TableExpandedRow key={rowExpanded.id}>
    <TableCell colSpan={headers.length + 1}>
      <div>
        {rowExpanded &&
          rowExpanded.billingItems &&
          rowExpanded.billingItems.map(
            item =>
              rowExpanded.id ===
                item.cancellationRequestId && (
                <div key={item.id}>
                  <p>
                    cancellationRequestId:{' '}
                    {item.cancellationRequestId}
                  </p>
                </div>
              ),
          )}
      </div>
    </TableCell>
  </TableExpandedRow>

所以我想制作一个像这样的组件

import React from 'react';
import PropTypes from 'prop-types';
import { DataTable } from 'carbon-components-react';

const { TableExpandedRow, TableCell } = DataTable;

const TableExpandedRowComp = ({ rowExpanded, rowExpandedId, itemId, headersLength, keyId }) => (
  <TableExpandedRow key={keyId}>
    <TableCell colSpan={headersLength}>
      <div>
        {rowExpanded &&
          rowExpanded.billingItems &&
          rowExpanded.billingItems.map(
            item =>
              rowExpanded.id === item.cancellationRequestId && (
                <div key={item.id}>
                  <p>cancellationRequestId: {item.cancellationRequestId}</p>
                </div>
              ),
          )}
      </div>
    </TableCell>
  </TableExpandedRow>
);

TableExpandedRow.propTypes = {
  rowExpanded: PropTypes.object, 
  headersLength: PropTypes.array,
  keyId: PropTypes.object,
};

export default TableExpandedRowComp;

然后将其导入之前的位置，例如：<TableExpandedRow {...props} />

整个组件看起来像这样，这是一种数据能力：

import React from 'react';
import PropTypes from 'prop-types';
import { translate } from 'react-i18next';
import { DataTable } from 'carbon-components-react';
import TableHeaders from '../TableHeaders';
import TablePagination from '../TablePagination';
import TableToolbarComp from '../TableToolbarComp';

const {
  TableContainer,
  TableRow,
  TableExpandHeader,
  TableExpandRow,
  TableExpandedRow,
  Table,
  TableHead,
  TableHeader,
  TableBody,
  TableCell,
} = DataTable;

function CancellationsTable({ t, tableRows }) {
  return (
    <div>
      <DataTable
        rows={tableRows}
        headers={TableHeaders(t)}
        render={({ rows, headers, getHeaderProps, getRowProps }) => (
          <TableContainer>
            <TableToolbarComp />
            <Table zebra={false} short>
              <TableHead>
                <TableRow>
                  <TableExpandHeader />
                  {headers.map(header => (
                    <TableHeader {...getHeaderProps({ header })}>
                      {header.header}
                    </TableHeader>
                  ))}
                </TableRow>
              </TableHead>
              <TableBody>
                {rows.map(row => (
                  <React.Fragment key={row.id}>
                    <TableExpandRow {...getRowProps({ row })}>
                      {row.cells.map(cell => (
                        <TableCell key={cell.id}>{cell.value}</TableCell>
                      ))}
                    </TableExpandRow>
                    {row.isExpanded &&
                      tableRows.map(
                        rowExpanded =>
                          row.id === rowExpanded.id && (
                            // THIS IS THE COMPONENT I WANT TO MOVE APART
                            <TableExpandedRow key={rowExpanded.id}>
                              <TableCell colSpan={headers.length + 1}>
                                <div>
                                  {rowExpanded &&
                                    rowExpanded.billingItems &&
                                    rowExpanded.billingItems.map(
                                      item =>
                                        rowExpanded.id ===
                                          item.cancellationRequestId && (
                                          <div key={item.id}>
                                            <p>
                                              cancellationRequestId:{' '}
                                              {item.cancellationRequestId}
                                            </p>
                                          </div>
                                        ),
                                    )}
                                </div>
                              </TableCell>
                            </TableExpandedRow>
                          ),
                      )}
                  </React.Fragment>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      />
    </div>
  );
}

CancellationsTable.propTypes = {
  t: PropTypes.func.isRequired,
  tableRows: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
};

export default translate()(CancellationsTable);

有帮助吗？

Answer 1

我认为您是在说要消耗道具，并将道具原封不动地传递给孩子？

为此，您需要在单独的语句中进行重构。

<DataTable
    rows={tableRows}
    headers={TableHeaders(t)}
    render={props => {
        const { rows, headers, getHeaderProps, getRowProps } = props;
        // omitted
        return <TableExpandedRow {...props} />
    }}

如何拆分组件并保持道具工作

1 个答案: