Question

我有这个组件：

style-src

当我在父级上调用它时，哪一个效果最佳？

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/>

但是，如果您在第二个代码段中看到的话，我会用不同的数据两次调用它。我该如何在包装器组件中复制它？

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

旁注：在您的示例中，rowValue和您的dataTitle都是description ...

如何创建包装器组件并传递道具以在包装器的父级中调用它

1 个答案: