如何动态创建表？

Question

从技术上讲，我创建了一个，但结果对我来说并不满意，因为我希望 if index.== 0 将 date 放在行下，以使其对用户更具可读性。 但是现在当我有不止一个时，他们都排成一排

                  .map((p, index) => (
                          <tr key={p.id}>
                              <td> {p.name}</td>
                              {Object.entries(p.cena)
                                .filter(([key]) => checkKw(correctSize, key))
                                .map(([key, value], index) => {
                               if(index === 0){
                                  return (
                                    <>   
                                   
                                        <td>                               
{key }</td>
                                        <td>
                                          {" "}
                                          {(value * 1.1).toFixed(1)}zł netto
                                        </td>
                                        <td>
                                          {cenaPoDotacjiIuldze(
                                            value * 1.1,
                                            wysokoscDotacji,
                                            stawkaPodatkuDochodowego
                                          ).toFixed(1)}
                                        </td>
                                    </>
                                  );
                                }  else {   return (         <>   
                                   
                                  <td>                               
{key }</td>
                                  <td>
                                    {" "}
                                    {(value * 1.1).toFixed(1)}zł netto
                                  </td>
                                  <td>
                                    {cenaPoDotacjiIuldze(
                                      value * 1.1,
                                      wysokoscDotacji,
                                      stawkaPodatkuDochodowego
                                    ).toFixed(1)}
                                  </td>
                              </>
                                                                          
                                                                          )    

                                }
                                
                               } )}
                          </tr>
                        ))}
                    </tbody>

Answer 1

每行都需要一个新的<tr> 。

添加一个</tr>以结束行，添加一个新的<tr>以在index == 0时开始新行：

.map((p, index) => (
    <>      
        <tr key={p.id}>
            <td> {p.name}</td>
            {Object.entries(p.cena)
                .filter(([key]) => checkKw(correctSize, key))
                .map(([key, value], index) => {
                    if(index === 0) {
                        return (
                          <>        
                            <td>{key }</td>
                            <td>
                                {" "}
                                {(value * 1.1).toFixed(1)}zł netto
                            </td>
                            <td>
                                {cenaPoDotacjiIuldze(
                                value * 1.1,
                                wysokoscDotacji,
                                stawkaPodatkuDochodowego
                                ).toFixed(1)}
                            </td>
                        </>
                      )
                    }  else {
                      return (
                        <>
                           </tr> <!-- end row -->
                           <tr> <!-- start new row -->
                            <td>{key}</td>
                            <td>
                                {" "}
                                {(value * 1.1).toFixed(1)}zł netto
                            </td>
                            <td>
                                {cenaPoDotacjiIuldze(
                                    value * 1.1,
                                    wysokoscDotacji,
                                    stawkaPodatkuDochodowego
                                    ).toFixed(1)}
                            </td>
                        </>
                      )
                    }
            })};
        </tr>
    
    </>
);