私はどのように反応してforループを使用しますか？

Question

私は反応が非常に新しく、私が本当に欲しいのは、自分の名前のタイトルを持つ配列の各ユーザーのためにmenuitem要素を作成する単純なforループです。だから私はそれを書く方法ですが、私は反応でこれを行う方法の手がかりがありません。私はそれがマップかもしれないと思うかもしれないが、私はそれがうまくいけば、ここで誰もが私を助けることができるいずれかを動作させるように見える。

あなたが行うことができます mapで

for (var i = 0; i < Users.length; i++) { 
    <MenuItem eventKey=[i]>User.firstname[i]</MenuItem> 
} 

Answer 1

renderコンポーネントの方法、またはあなたのステートレスなコンポーネントの機能は、レンダリングする要素を返します。

あなたはループを使用する場合、それは大丈夫です：

render() { 
    let menuItems = []; 
    for (var i = 0; i < Users.length; i++) { 
     menuItems.push(<MenuItem eventKey=[i]>User.firstname[i]</MenuItem>); 
    } 
    return <div>{menuItems}</div>; 
} 

より一般的には、このような要素の配列を返すようにマップを使用するなど、より機能的なスタイルを見て次のようになります。

render() { 
    return <div> 
    { 
     Users.map((user, i) => 
      <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>) 
    } 
    </div>; 
} 

いずれの場合も、配列の各要素からkeyプロパティが欠落しているので、警告が表示されます。配列内の各要素には固有のキーが必要です。配列インデックスだけでなく、IDの形式を使用することが好ましいです。

Answer 2

：

Users.map((user, index) => (
    <MenuItem eventKey={index}>user.firstname</MenuItem> 
));