Question

我对React比较陌生，我看了很多地方，找不到专门处理这个问题的方法。我检查过以前的答案。

我试图让我的应用程序循环遍历一个数组，并打印一个语句和数组。

var user = ["Kevin", "Kyle", "Kylian"];

var Hello = <h1>
            Hello, {user}!
            </h1>

class App extends Component {
  render() {
    for(var i=0;i<user.length;i++){
    return Hello;
    }
  }
}

export default App;

输出：

Hello, KevinKyleKylian!

预期产出：

Hello, Kevin!
Hello, Kyle!
Hello, Kylian!

正如您所看到的，循环由于某种原因不会连续返回整个输出，在{user}的用户迭代之后，它只会打印{user}直到数组结束。为什么会这样？我怎么能避免这个？

Answer 1

这可能是因为这一点：

getUsers() {
  let userList = [];
  for (let i=0; i<user.length; i++) {
    userList.push(<div>Hello, {user[i]}</div>);
  }
  return userList;
}

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

在这种情况下，'user'指的是整个数组，而不仅仅是该数组的特定元素。

通常，如果你在React中动态构建元素，将它放在一个单独的函数而不是render方法中是件好事，我觉得它有点整洁。所以像这样：

{{1}}

在React中创建循环HTML元素

1 个答案: