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! 

は、何らかの理由でループが連続して出力全体を返すと、ユーザーの後はありません{ユーザー}の反復では、配列が終了するまで{ユーザー}が表示されます。なぜこれが起こるのですか？どうすればこれを避けることができますか？

Answer 1

それはおそらく、このビットのためです。その場合は「ユーザー」に

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

は、その配列のだけではなく、特定の要素、配列全体を参照しています。

一般的に、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> 
); 
}