我有这个子组件:
const TableExpandedRowItem = ({ dataTitle, rowValue, cellClassProp }) => (
<div data-title={dataTitle} className={cellClassProp}>
<p>{rowValue}</p>
</div>
);
我将其传递给其父级以创建迭代:
const TableExpandedRowWrapper = ({ rowClassProp, billingItem }) => (
<div className={rowClassProp}>
{billingItem.map(key => (
<div>
<TableExpandedRowItem
dataTitle={billingItem[key].description}
rowValue={billingItem[key].description}
/>
<TableExpandedRowItem
dataTitle={billingItem[key].recurringFee}
rowValue={billingItem[key].recurringFee}
/>
</div>
))}
</div>
);
我收到此错误:
未捕获的TypeError:billingItem.map不是函数
在这里我需要称呼它
{rowExpanded.billingItems &&
rowExpanded.billingItems.map(item =>
rowExpanded.id === item.cancellationRequestId && (
<div className="row" key={item.id}>
// HERE
<TableExpandedRowWrapper billingItem={item.billingItem} />
...
更新:
如果我在没有包装器组件的情况下直接调用组件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>
),
)}
我想将其带到另一个组件上,这是我在TableExpandedRowWrapper
上尝试做的事情:
<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>
因此,基本上,我需要将TableExpandedRowItem
放入包装器中,并按上面所示进行调用。