反应在渲染映射返回数组

问题描述

我有一个反应正在呈现一些成果的组成部分。我遇到的问题是与result.participants。这是一个数组，因此地图没有任何间距呈现这两个名字，我发现它很难得到插入的处所。

该result.participants是字符串数组。

如果长度> 1如何插入空格或一些逻辑来把一个逗号和空格？

 渲染：功能（）{
  返回（
  ＆LT; UL＆GT;
    {
      this.state.pads.map（功能（结果）{
        返回[
        ＆所述; A HREF = {result.pageUrl}＆GT; {result.title}＆下; /一＆gt;中
        ＆LT;李键= {result.participants}＆GT;参会人员：{result.participants}＆LT; /李＆gt;中
        ＆LT;李键= {result.summary}＆GT;摘要：{result.summary}＆LT; /李＆gt;中
        ＆LT;李键= {result.lastEdit}＆GT;最后编辑：{新的日期（result.lastEdit）.toDateString（）}＆LT; /李＆gt;中
        ＆所述p为H.;＆下; / P＆GT;
        ];
      }）}
  ＆LT; / UL＆GT;
）
}
 

解决方案

就像一个评论者提到的，你不应该把裸＆LT; A＆GT; 和＆LT; p＆GT; 标记成＆LT; UL＆GT; 直接。但是，这是题外话，这个问题是关于阵列处理的反应。

您应该能够使用嵌套在JSX这样的控制流结构：

  {
  result.participants.map（功能（参与者，IDX）{
    如果（IDX == result.participants.length  -  1）{
      返回（
        ＆LT;跨度＆GT; {}参与者，＆LT; / SPAN＆GT;
      ）;
    }其他{
      返回参与者;
    }
  }）
}
 

I have a react component that is rendering some results. The problem I am having is with result.participants. This is an array, so map is rendering both names without any spacing and I am finding it difficult to get those spaces inserted.

The result.participants is an array of strings.

How do I insert a space or some logic to put in a comma and a space if the length is >1 ?

render: function(){
  return (
  <ul>
    {
      this.state.pads.map(function(result){
        return [
        <a href={result.pageUrl}>{result.title}</a>,
        <li key={result.participants}>Participants: {result.participants} </li>,
        <li key={result.summary}>Summary: {result.summary}</li>,
        <li key={result.lastEdit}>Last Edited: {new Date(result.lastEdit).toDateString()} </li>,
        <p></p>
        ];
      })}
  </ul>
)
}

解决方案

Like a commenter mentioned, you should not put bare <a> and <p> tags into a <ul> directly. But that is beside the point, this question is about array handling in React.

You should be able to use a control flow structure nested in JSX like this:

{
  result.participants.map(function(participant, idx) {
    if (idx == result.participants.length - 1) {
      return (
        <span>{participant}, </span>
      );
    } else {
      return participant;
    }
  })
}

这篇关于反应在渲染映射返回数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！