如何在循环中生成反应 html

Question

好吧，所以这在过去的几个小时里一直让我发疯。几乎我想要一个函数，该函数基于数组中的对象生成html，这些对象作为参数传递给它。我的代码如下所示：

handleEvents = (array) => {
if(array.length > 0){
  array.forEach(function(each){
    return(<h1>hello {each.name}</h1>)
  })
}

在我的渲染组件中，我有这个：

<div className="caption left-align">
  <h3>Upcoming events</h3>
    {this.handleEvents([{name: "Dave"}, {name: "Mary"}, {name: "Chris"}])}
 </div>

但是当我运行此代码时，没有任何内容输出到屏幕。我该怎么办？

Answer 1

唯一的问题是Arrays.forEach不返回任何内容。如果将句柄事件函数更改为更像

if(array.length > 0){
  return array.map(function(each){
    return(<h1>hello {each.name}</h1>)
  })
} else {
  return []
}

这应该返回一个 h1。map 函数将返回返回元素的列表

Answer 2

或者使用 forEach

 handleEvents = (array) => {
 if(array.length > 0){
  let tempArray = []
  array.forEach(function(each){
    tempArray.push(<h1>hello {each.name}</h1>)
 })
  return tempArray
}

Answer 3

我们可以在使用 array.map(( 时使用表达式函数。通过将匿名函数替换为表达式函数来更改代码，如下所示，我们可以实现相同的效果。

array.length > 0 ?
   array.map((item, index) => {
      return (
         <li className="list-item" key={index}>{item.Title}</li>
        );
      }) :  "No item found."

Answer 4

forEach 函数返回未定义。因此，您的代码不显示任何内容。您可以使用 map 函数创建一个新数组，其中包含对调用数组中的每个元素调用提供的函数的结果。

if(array.length > 0){
  return array.map(function(each){
    return(<h1>hello {each.name}</h1>)
  })
} 

Answer 5

如果您只需要为数组的每个元素显示一些标记(没有额外的逻辑(，则可以在 render 的jsx中直接使用 map。下面是一个示例：

render() {
    const array = [{name: "Dave"}, {name: "Mary"}, {name: "Chris"}];
    return (<div className="caption left-align">
      <h3>Upcoming events</h3>
      {array && array.map((el) => <h1>hello {el.name}</h1>)}
    </div>);
}

您不必检查array.length是否大于0因为如果数组为空，则无论如何都不会呈现任何内容，因此检查将是多余的。但是，您可以检查它是否null或undefined(在上面的示例中检查了truthy(，因为如果是并且您尝试在其上调用map，则代码将引发异常。