在 React 中创建一个循环 HTML 元素

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!

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

Answer 1

可能是因为这个位：

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

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

一般来说，如果您在 React 中动态构建元素，最好将它放在一个单独的函数中而不是 render 方法中，我觉得这样更简洁一些。所以像这样：

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>
  );
}

在 React 中创建一个循环 HTML 元素

Creating a looped HTML element in React

jsx

reactjs