Question

我有一种情况，我需要在我的render方法中两次映射同一数组，以渲染数组中对象的不同属性。因此，就是这种情况：

   <Row>
      <Column xs="12" md="6">
        <Row>
          <Column xs="12">
            <Undertekst>
              <FormattedMessage id="InfoPanel.PaymentDates" />
            </Undertekst>
          </Column>
        </Row>
        {getPeriods(payment.periods, periodsDates)}
      </Column>
      <Column xs="12" md="6">
        <Row>
          <Column xs="12">
            <Undertekst>
              <FormattedMessage id="InfoPanel.PaymentAmount" />
            </Undertekst>
          </Column>
        </Row>
        {getPeriods(payment.periods, amount)}
      </Column>
    </Row>

因此，由于我需要在两个地方映射同一数组，所以我制作了一个函数，该函数接受一个数组和一个函数，该函数将渲染数组中当前对象的子元素。

const periodsDates = period => `${moment(period .from).format(DDMMYYYY_DATE_FORMAT)} - ${moment(period .to).format(DDMMYYYY_DATE_FORMAT)}`;
const amount= period => formatCurrency(period.amount);
const getPeriods = (periods, children) => periods.map(period => (
  <Row>
    <Column xs="12">
      <Normaltekst>
        {children(period )}
      </Normaltekst>
    </Column>
  </Row>
));

我想知道这是否是解决该问题的方法，或者是否有更好的方法来解决这个问题，如果可能的话，可以通过找钱？

Answer 1

您可以构建一个新的无状态组件，可以说您将其称为带有2个道具（Periods，data）的Periods。这样，您甚至可以在其他地方使用它。

在同一数组上反应映射但呈现不同的输出

1 个答案: