Question

我找了类似的问题，但无法找到解决方案。我能够生成标题列和带有值的行。但由于它们是分开完成的，因此对齐关闭。那么，有没有办法让它更好地对齐或者可能只有trowz就足够了？没有迭代在tvalues中单独完成？

这是相关代码

 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>

也是这样的。问题是列名不与列值对齐，因为它们的长度不同。那么，我如何让它们正确对齐？

此刻，它看起来像这样

我现在知道为什么会这样。我想这可能是因为trowz和tavalues都在不同的表格中。现在，我试图将它们放在同一个表中，但它不起作用

这是我现在看起来的修改格式，当我尝试将它放在同一个表中时。请告诉我哪里出错了。

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 Iglesias，您的解决方案使它看起来像这样这与上面编辑过的代码相似。

生成的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

对于你说和显示的内容，内容没问题，只是格式化问题。而对于我来说，将信息组织在一个表中对我来说更有意义，所以你可以选择......

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

您应该为每个元素的key选择一个更好的选项，而不是地图索引值。获得一个对元素内容有意义的内容。

使用map嵌套动态生成标题和行reactjs

1 个答案: