Как я могу создать компонент обертки и передать реквизиты для вызова его в родительском обертке

Question

У меня есть этот компонент:

import React from 'react';
import PropTypes from 'prop-types';

const TableExpandedRowItem = ({ dataTitle, rowValue, cellClassProp }) => (
  <div data-title={dataTitle} className={cellClassProp}>
    <p>{rowValue}</p>
  </div>
);

TableExpandedRowItem.propTypes = {
  dataTitle: PropTypes.string.isRequired,
  rowValue: PropTypes.string.isRequired,
  cellClassProp: PropTypes.string,
};

TableExpandedRowItem.defaultProps = {
  cellClassProp: 'cell',
};

export default TableExpandedRowItem;

, который прекрасно работает, когда я вызываю его на родительском, например:

{rowExpanded.billingItems &&
  rowExpanded.billingItems.map(
    item =>
      rowExpanded.id ===
        item.cancellationRequestId && (
        <div className="row" key={item.id}>
          <TableExpandedRowItem
            dataTitle={
              item.billingItem.description
            }
            rowValue={
              item.billingItem.description
            }
          />
          <TableExpandedRowItem
            dataTitle={
              item.billingItem.recurringFee
            }
            rowValue={
              item.billingItem.recurringFee
            }
          />
        </div>
      ),
  )}

Но я хочу создать компонент-оболочку.если вы видите код выше, есть div, заключающий вызовы в компонент <TableExpandedRowItem/>.

Так что я хочу сделать что-то вроде этого:

import TableExpandedRowItem from './TableExpandedRowItem'

const TableExpandedRowWrapper = ({ rowClassProp }) => (
  <div className={rowClassProp}>
    <TableExpandedRowItem  dataTitle={}/>
  </div>
);

Но если вы видитево втором фрагменте кода я вызываю его дважды с разными данными.Как мне вместо этого скопировать это в компонент оболочки?

Answer 1

Не совсем уверен, что это то, чего вы хотите достичь, но просто поместите свои ключи в карту и сделайте еще одну итерацию.

Примечание: код не проверен и не оптимизирован для избежания ненужных циклов рендеринга.

{rowExpanded.billingItems &&
  rowExpanded.billingItems.map(
    item =>
      rowExpanded.id === item.cancellationRequestId && (
        <TableExpandedRowWrapper billingItem={item.billingItem} />
      ),
  )}

Ваша оболочка

const TableExpandedRowWrapper = ({ billingItem }) => (
  <div className="row">
    // alternatively iterate over Object.values(billingItem)
    ['description', 'recurringFee'].map(key) =>
        <TableExpandedRowItem
          dataTitle={
            billingItem[key].description
          }
          rowValue={
            billingItem[key].description
          }
        />
    )
  </div>
);

Sidenote: кажется немного странным, что вваш пример rowValue и ваш dataTitle оба description ...