reactjs 如何在JSX REACT中基于if条件在表中添加新行

ukqbszuj 于 2023-03-29 发布在 React

关注(0)|答案(2)|浏览(141)

我有一个表结构在我的React应用程序使用jsx，这里是我的代码...

<div>
              <TableWrapper className="table-data-view table-responsive">
                <ChartViewWrapper>
                  <table align="center" className="record">
                    <thead>
                      {!charts[0] || charts[0].freq === 6 ? (
                        <tr key="1">
                          <td>Date</td>
                          <td colSpan="3">MON</td>
                          <td colSpan="3">TUE</td>
                          <td colSpan="3">WED</td>
                          <td colSpan="3">THU</td>
                          <td colSpan="3">FRI</td>
                          <td colSpan="3">SAT</td>
                        </tr>
                      ) : (
                        ''
                      )}

                      {!charts[0] || charts[0].freq === 7 ? (
                        <tr key="2">
                          <td>Date</td>
                          <td colSpan="3">MON</td>
                          <td colSpan="3">TUE</td>
                          <td colSpan="3">WED</td>
                          <td colSpan="3">THU</td>
                          <td colSpan="3">FRI</td>
                          <td colSpan="3">SAT</td>
                          <td colSpan="3">SUN</td>
                        </tr>
                      ) : (
                        ''
                      )}

                      {!charts[0] || charts[0].freq === 5 ? (
                        <tr key="3">
                          <td>Date</td>
                          <td colSpan="3">MON</td>
                          <td colSpan="3">TUE</td>
                          <td colSpan="3">WED</td>
                          <td colSpan="3">THU</td>
                          <td colSpan="3">FRI</td>
                        </tr>
                      ) : (
                        ''
                      )}
                    </thead>
                    <tr>
                      <td>
                        29/12/14
                        <br /> to
                        <br /> 01/01/15
                      </td>
                      {charts.map((chart, index) => {
                        return (
                          <>
                            <td className="verticaltext">{chart.open}</td>
                            <th>{chart.jodi}</th>
                            <td className="verticaltext">{chart.close}</td>
                            { {(index + 1) % charts[0].freq === 0 ? </tr><tr> : ''} }
                          </>
                        );
                      })}
                    </tr>
                  </table>
                </ChartViewWrapper>
              </TableWrapper>
            </div>

这里的任务是，我们必须从星期一列下06下面的第二行开始添加34 ....当我尝试我的代码中提到的代码时，它显示错误：JSX表达式必须有一个父元素。我不知道如何解决这样的错误在我的情况下.....这里我们不能使用默认的表结构的React一样dataSource和列...谁可以帮助我摆脱这个....

reactjs

来源：https://stackoverflow.com/questions/75862503/how-to-add-new-row-in-a-table-based-on-if-condition-in-jsx-react

2条答案

按热度按时间

rhfm7lfc1#

我不确定这是否是你的错误来源，但你已经颠倒了一个关闭和打开的jsx标签：

{ {(index + 1) % charts[0].freq === 0 ? </tr><tr> : ''} }

应为：

{ {(index + 1) % charts[0].freq === 0 ? <tr></tr> : ''} }

赞(0）回复(0）举报 2023-03-29

ego6inou2#

从谷歌搜索后，我终于得到了解决我自己的问题...我想在这里分享...
主要数据：

const { charts } = useSelector((state) => {
    return {
      charts: state.result.chartData,
    };
  });

现在我把主数据拆分成interval然后像这样推到另一个数组上。。

const chartSource = [];

  const splitChart = (arr, chunk) => {
    for (let i = 0; i < arr.length; i += chunk) {
      const newArr = arr.slice(i, i + chunk);
      chartSource.push(newArr);
    }
  };

  splitChart(charts, charts[0].freq);

  console.log(chartSource);

最后以JSX形式返回输出，如下所示：

{chartSource.map((rows) => (
                        <tr>
                          <td>
                            29/12/14 <br /> to <br /> 01/01/15
                          </td>
                          {rows.map((row) => (
                            <>
                              <td className="verticaltext">{row.open}</td>
                              <th>{row.jodi}</th>
                              <td className="verticaltext">{row.close}</td>
                            </>
                          ))}
                        </tr>
                      ))}

无论如何，谢谢大家……

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs 如何在JSX REACT中基于if条件在表中添加新行

2条答案

相关问题

热门标签

最新问答