Javascript 在React应用程序中，如何在此映射函数中的每个项目后添加换行符？

我在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中呈现

它的值作为道具传递，并在JSX中呈现，如：

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

{拒绝原因}
{reasons&&reasons.join（'，）}

---

其值为{rejectReason}

尝试在每行末尾使用

标记

---

像

Line:${index+1}${rejectString.rejectReason}

我建议不要在选择器中组合JSX，而只是像当前一样将行作为数组返回，然后将其映射到

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>

{this.props.rejectReason.map（（rejectReason）=>行：{index+1}{RejectReasure}
）

我已经更新了问题的描述，以便更清楚一点。这是行不通的，因为它的值是作为道具传递的。我开始认为我需要重新构造它的渲染组件。是的，这是一个好主意。从选择器中获取原因作为数组，然后循环该数组以呈现每个原因的

组件。这肯定会解决您的问题。您正在输出HTML，对吗？我假设您需要一个break元素来插入新行

Hmm，字符串插值中的
不起作用intended@ghostagent151抱歉，有一段时间没有使用React。更新了答案，将其包装成碎片。