マップを使用して見出しと行reactjsを動的に生成します。

Question

私は同様の問題を探しましたが、解決策を見つけることができませんでした。 ヘッダー列と値を含む行を生成できます。 ただし、これらは別々に行われるため、位置合わせはオフになります。 それでは、それをより整列させる方法や、trowzだけで十分な方法でネストする方法はありますか？反復は別々にtvalueで行われることはありませんか？

ここに関連するコードが

let keysForSalaryMonth=Object.keys(this.props.stateprops.salarysheet[this.props.stateprops.salaryForMonth]); 
    let salaryProperties = Object.keys(this.props.stateprops.salarysheet[this.props.stateprops.salaryForMonth][keysForSalaryMonth[0]]); 
    let salaryObj = this.props.stateprops.salarysheet[this.props.stateprops.salaryForMonth]; 
    console.log(salaryObj[keysForSalaryMonth[0]][name]); 
    const trowz = (<table><th> 
    {salaryProperties.map((item)=> 
     <td>{item}</td> 
    )} 
    </th> 
    </table> 
); 

    const tvalues = (<table> 
    { keysForSalaryMonth.map((epf)=>{ 
     return (<tr> 
     {salaryProperties.map((prprty)=> 
     <td>{salaryObj[epf][prprty]} </td> 

    )} 
    </tr>) 
    } 
    )} 

     </table>); 

    return(
     <div> 
     {trowz} 
     {tvalues} 
     </div> 
    ) 
    } 

の意図されたHTMLが多少この

<table> 
<th><td>name</td><td>amount</td>wages</td></th> 
<tr><td>Jack</td><td>34543</td>39999</td> 

    </table> 

のようなもので、それはあまりにもそのように来ています。 問題は、列の名前が同じ長さではないため、列の値が列の値と揃っていないことです。 それで、どうやってそれらを正しく整列させるのですか？現時点では

は、それは私が今、なぜこれが起こっていたのアイデアを持っています。この

のように見えます。 トロウズとタバールの両方が別々のテーブルにあることが原因と考えられます。 今、私はそれらを同じテーブルに入れようとしていますが、動作していません。

ここで私は同じテーブルに入れようとすると、どのように見えるかの改訂フォーマットです。 どこが間違っているのか教えてください。

const trowz = (<th> 
    {salaryProperties.map((item)=> 
     <td>{item}</td> 
    )} 
    </th> 

); 
    const tvalues =(keysForSalaryMonth.map((epf)=>{ 
    return salaryProperties.map((prprty)=> 
     <tr> <td>{salaryObj[epf][prprty]} </td> </tr> 

    )}) 
); 

    return(
     <table> 
     {trowz} 
    {tvalues} 
     </table> 
    ) 
    } 

は@Aイグレシアス、あなたの解決策は、私は上記の編集したコードとなっていたものと同様である。この ように見えます。

あなたが言うとショー何のために生成されたHTML

<table> 
<th> 
<td>name</td><td>epf</td><td>hra</td><td>days</td><td>wagesrate</td><td>basicSalary</td><td>totalWages</td><td>totalAmountPayable</td><td>da</td><td>totalAmount</td><td>pfValue</td><td>esiValue</td><td>totalDeduction</td> 
</th> 
<tbody> 
<tr><td>pintu</td><td>98798789</td><td>902</td><td>2</td><td>8789</td><td>987987</td><td>17578</td><td>18033</td><td>454.6</td><td>18935</td><td>2164</td><td>331</td><td>2495</td></tr> 
</tbody> 
</table> 

Answer 1

は、コンテンツはokです、ちょうどフォーマットの問題です。そして、のためにあなたが代わりにマップの各要素のkeyのためのより良いオプションを選択する必要があります

return (
    <table> 
    <thead> 
     <tr> 
     {salaryProperties.map((item,i) => (
      <th key={i}>{item}</th> 
     ))} 
     </tr> 
    </thead> 
    <tbody> 
     {keysForSalaryMonth.map((epf,i) => (
     <tr key={i}> 
      {salaryProperties.map((prprty,j) => (
      <td key={j}>{salaryObj[epf][prprty]}</td> 
     ))} 
     </tr> 
    ))} 
    </tbody> 
    </table> 
) 

...あなたが一緒に行くことができますので、それは、単一のテーブルに整理情報を持っている私には、より理にかなってほしいですインデックス値。要素の内容に合ったものを入手してください。