使用Reactjs将字符串数组转换为HTML

有谁能帮我找到一种正确的方法来迭代字符串数组，然后使用Reactjs将其放置在段落标记中

该数组类似于：

names = [ "James", "Susan", "Frank" ];

let returnString = "";
this.props.names.map((item) => {
   //TODO: add something to check if it's the last item
   returnString += item + " - "
})

下面是我的react组件，名为“Riders”（我已经添加了一些注释，以帮助您了解我正在尝试做的事情）：

从“React”导入React；
从“../api/Drivers”导入{Drivers}；
//“this.props.names”包含一个名称数组：[“John”、“Susan”、“John”]。
//我如何迭代数组，从数组中提取名称，然后
//将这些名称以如下方式呈现在段落标记中：
//约翰-苏珊-约翰

//到目前为止，我已经尝试使用模板字符串和大括号，{}，javascript
//注射。这样做会产生一个空段落。请告诉我正确的方法
//完成这项任务的方法。任何帮助都将不胜感激。：）
导出默认类附加程序扩展React.Component{
renderNames（）{
让空=``
让name=this.props.names；
让namesLength=names.length；
对于（变量i=0；i
);
}
}

看看JS.map方法

有了它，你可以做如下事情：

names = [ "James", "Susan", "Frank" ];

let returnString = "";
this.props.names.map((item) => {
   //TODO: add something to check if it's the last item
   returnString += item + " - "
})

---

看看JS.map方法

有了它，你可以做如下事情：

names = [ "James", "Susan", "Frank" ];

let returnString = "";
this.props.names.map((item) => {
   //TODO: add something to check if it's the last item
   returnString += item + " - "
})

---

您的代码中有一些错误

首先，渲染时需要调用

renderNames

<p>{this.renderNames()}</p>

{this.renderNames（）}

然后

renderNames

实现不正确

empty

是一个在js中不可变的字符串。不能使用索引

empty[i]=something

您应该检查当前元素是否不是第一个元素。因为您不想在第一个元素之前插入分隔符

整个循环是冗余的。有一种特殊的方法

join

用给定的分隔符连接字符串数组

---

因此，

renderNames

可能是一个简单的方法，因为

返回这个.props.names.join（'-'）

您的代码中有一些错误

首先，渲染时需要调用

renderNames

<p>{this.renderNames()}</p>

{this.renderNames（）}

然后

renderNames

实现不正确

empty

是一个在js中不可变的字符串。不能使用索引

empty[i]=something

您应该检查当前元素是否不是第一个元素。因为您不想在第一个元素之前插入分隔符

整个循环是冗余的。有一种特殊的方法

join

用给定的分隔符连接字符串数组

---

因此，

renderNames

可以是一个简单的方法，如

返回this.props.names.join（'-'）

所示，您应该使用

{this.renderNames（）}

。检查下面的示例

export default class React.Component {
  constructor(props) {
    super(props);
  }

  renderNames() {
    let empty = ``
    let names = this.props.names;
    let namesLength = names.length;
    for (var i = 0; i < namesLength; i++) {
      empty = empty + `-` + ` ${names[i]}`
    }

    return empty;
  }

  render() {
    return(
      <div>
        {this.renderNames()}
      </div>
    )
  }
}

导出默认类React.Component{
建造师（道具）{
超级（道具）；
}
renderNames（）{
让空=``
让name=this.props.names；
让namesLength=names.length；
对于（变量i=0；i

如前所述，您应该使用

{this.renderNames（）}

。检查下面的示例

export default class React.Component {
  constructor(props) {
    super(props);
  }

  renderNames() {
    let empty = ``
    let names = this.props.names;
    let namesLength = names.length;
    for (var i = 0; i < namesLength; i++) {
      empty = empty + `-` + ` ${names[i]}`
    }

    return empty;
  }

  render() {
    return(
      <div>
        {this.renderNames()}
      </div>
    )
  }
}

导出默认类React.Component{
建造师（道具）{
超级（道具）；
}
renderNames（）{
让空=``
让name=this.props.names；
让namesLength=names.length；
对于（变量i=0；i

现在就可以了！下面是@Yury建议的Join方法的实现：

从“React”导入React；
从“../api/Drivers”导入{Drivers}；
导出默认类附加程序扩展React.Component{
renderNames（）{
返回此.props.riders.join（'-'）；
}
render（）{
返回(
{this.renderNames（）}

);
}
}

对“Join（）”方法的引用：

现在就可以了！下面是@Yury建议的Join方法的实现：

从“React”导入React；
从“../api/Drivers”导入{Drivers}；
导出默认类附加程序扩展React.Component{
renderNames（）{
返回此.props.riders.join（'-'）；
}
render（）{
返回(
{this.renderNames（）}

);
}
}

---

引用“Join（）”方法：

为什么他需要绑定

renderNames

？@YuryTarabanko，因为React使用this关键字引用每个类中的组件上下文@Kaeland在

renderNames

中使用

this

关键字（即this.props.names），但他从不将此函数作为回调传递。在这种情况下绑定没有意义。一般来说，与此相关的约束与反应无关。这是ES5在回调中保持当前上下文的方法。为什么他需要绑定

renderNames

？@YuryTarabanko，因为React使用this关键字引用每个类中的组件上下文@Kaeland在

renderNames

中使用

this

关键字（即this.props.names），但他从不将此函数作为回调传递。在这种情况下绑定没有意义。一般来说，与此相关的约束与反应无关。这是ES5在回调中保持当前上下文的方法。为什么要为此使用

map

？即使您想在这个任务中使用迭代，也有一个更可使用的迭代器

reduce

。不用说，这里有一个很好的

加入
。所有这些建议都很棒！谢谢你们让我对解决这个问题有了更深入的了解。@YuryTarabanko我直到现在才知道reduce或join方法