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

Question

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

   <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 个道具（句点、数据）的句点。 这样您甚至可以在其他地方使用它。