反応ブートストラップテーブルにアレイを動的に追加するにはどうすればよいですか？

Question

Ajax呼び出しのデータに基づいてテーブルをレンダリングするReactコンポーネントがあります。 1行のデータがあるかもしれませんし、N行の最大値があるかもしれません（巨額ではありませんが、限界があります）。

react-bootstrapを使用すると、私はthis.state.dataから得られるデータに応じてどのようにテーブルを作成しますか？

ここに、クラスのrenderのサンプルコードがあります。配列の長さに応じて個々の細胞をどのように配置すればよいですか？

配列には、入力する各行のオブジェクトが含まれており、データはNameとAddressと同様にAge（例として）に腐食します。 <td>に適切な金額を入力するにはどうすればよいですか？

あなたのレンダリングには：

<Table striped condensed hover> 
    <thead> 
    <tr> 
     <th></th> 
     <th>Name</th> 
     <th>Address</th> 
     <th>Age</th> 
    </tr> 
    </thead> 
    <tbody> 
    {personArray.map(this.renderPerson)} 
    </tbody> 
</Table> 

あなたrenderPerson機能：

renderPerson(person, index) { 
    return (
    <tr key={index}> 
     <td>{person.name}</td> 
     <td>{person.address}</td> 
     <td>{person.age}</td> 
    </tr> 
) 
} 

それはあなたがこのような何かを行うことができますどこでも1からN.

に

render : function() { 


     let personArray = []; // Array containing objects that each match the three columns I wish to populate. 


     for(let i = 0; i < personArray.length; i++){ 
      console.log(personArray[i]); // Prints correctly each object with three value key pairs inside 
     } 

     const popoverLeft = (

      <Popover id="popover-positioned-left" title="Country name"> 
       <Table striped bordered condensed hover> 
        <thead> 
        <tr> 
         <th>Name</th> 
         <th>Address</th> 
         <th>Age</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
         // Goes on .. 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
         // Goes on .. 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
         // Goes on .. 
        </tr> 
        </tbody> 
       </Table> 
      </Popover> 
     ); 

     return(
      <div> 
       <OverlayTrigger trigger="click" placement="right" overlay={popoverLeft}> 
        <div> 
        </div> 
       </OverlayTrigger> 
      </div> 
     ) 

Answer 1

かもしれませんmap関数はあなたの配列を繰り返し処理し、レンダリングする要素の新しい配列を返します。