时间戳

首页 > 解决方案 > 在我的 React 应用程序中，如何在这个 map 函数中的每个项目之后添加一个换行符？

javascript - 在我的 React 应用程序中，如何在这个 map 函数中的每个项目之后添加一个换行符？

问题描述

我在我的 React 应用程序中使用了这个 redux 选择器。我已经取得了不错的进展，但我正在处理的最后一个问题遇到了困难，我觉得解决它不应该那么难，但我正在努力。

我想要实现的是在映射每个项目后，下一个项目必须换行。

export const vLineRejectionSelector = createSelector(
  selectedVIdSelector,
  linesSelector,
  (id, lines) =>
    lines
      .filter(line => line.id === id)
      .map(
        (rejectString, index) =>
          `Line: ${index + 1} ${rejectString.rejectReason}`
      )
);

在此查看的唯一相关代码是 map 函数。我希望每个项目在映射时都转到新行。

输出应该类似于：

Line 1: Reject Reason One
Line 2: Reject Reason Two

相反，输出看起来像：

Line1: Reject ReasonOneLine2: Reject Reason Two

这也在 JSX 中呈现

this 的值作为 prop 传递并在 JSX 中呈现，如下所示：

        <Typography variant="body2">
          {rejectReason}
          {reasons && reasons.join(', ')}
        </Typography>

其值为 {rejectReason}。

标签： javascriptreactjsarray.prototype.map

解决方案

我建议不要在您的选择器中编写 JSX，而只是像您当前所做的那样将行作为数组返回，然后将其映射到函数<br />中的列表或简单的连接列表render()。这使您的选择器更易于测试，并且不会将状态选择问题与表示问题混为一谈。

例如： 在您的容器中

const mapStateToProps = (state) => {
  return {
    rejectReason: vLineRejectionSelector(state)
  }
}

const SomeComponentContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(SomeComponent)

export default SomeComponentContainer

然后在您SomeComponent的 s 渲染函数中：

<Typography variant="body2">
   {this.props.rejectReason.map((rejectReason) => <>Line: {index + 1} {rejectReason}<br /></>)}
</Typography>

推荐阅读