如何使用 ReactJS 在表格标签中编写 if 条件

Question

如果条件在 ReactJS 中不起作用。我想创建一个 Accordion 并从 Excel 工作表中获取数据。并设置 ID 的哪个数据显示哪个按钮，我无法创建 if 条件。

{items.map((d) => (

        <Accordion key={d.ID} 

          title={

            <div>

              <tr className="btn-heading">

                <td>{d.ID}</td>

                <td>{d.Mail}</td>

                <td>{d.Name}</td>

                <td>{d.PhoneNo}</td>

                <td>{d.City}</td>

                <td>{d.Date}</td>

                <td>{d.Time}</td>

              </tr>

            </div>

          }

          content={

            <div>

              <p className="header">

                  <span className="header-content">Shipping Address:</span>

                  292 Naqshband Colony. Near rabbania Mosque. Multan

              </p>

              <Table size="sm">

                <thead>

                  <tr>

                    <th>#</th>

                    <th>Article No</th>

                    <th>Product Name</th>

                    <th>Quantity</th>

                    <th>Price</th>

                    <th>Total Amount</th>

                  </tr>

                </thead>

                <tbody>

                  {products.map((c) =>

                  (

                    if(c.ID === 1) {   <--- this if condition is not working      

                      <tr key={c.ID}>

                        <td>{c.ArticleNo}</td>

                        <td>{c.ProductName}</td>

                        <td>{c.Quantity}</td>

                        <td>{c.Price}</td>

                        <td>{c.TotalAmount}</td>

                      </tr> 

                    }                                        

                  ))};

                </tbody>

              </Table>

这是我的代码箱： https://codesandbox.io/s/hungry-bardeen-8m2gh ?file=/src/App.js

Answer 1

您可以使用三元运算符来检查if-else语句。修改部分代码如下，改变，{products.map((c) =>&nbsp; &nbsp;(&nbsp; &nbsp; if(c.ID === 1) {&nbsp; &nbsp;<--- this if condition is not working&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <tr key={c.ID}>&nbsp; &nbsp; &nbsp;<td>{c.ArticleNo}</td>&nbsp; &nbsp; &nbsp;<td>{c.ProductName}</td>&nbsp; &nbsp; &nbsp;<td>{c.Quantity}</td>&nbsp; &nbsp; &nbsp;<td>{c.Price}</td>&nbsp; &nbsp; &nbsp;<td>{c.TotalAmount}</td>&nbsp; &nbsp; </tr>&nbsp;&nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;))};到：&nbsp; &nbsp;{products.map((c) =>&nbsp; &nbsp; &nbsp;c.ID === 1 ? (&nbsp; &nbsp; &nbsp;<tr key={c.ID}>&nbsp; &nbsp; &nbsp; <td>{c.ArticleNo}</td>&nbsp; &nbsp; &nbsp; <td>{c.ProductName}</td>&nbsp; &nbsp; &nbsp; <td>{c.Quantity}</td>&nbsp; &nbsp; &nbsp; <td>{c.Price}</td>&nbsp; &nbsp; &nbsp; <td>{c.TotalAmount}</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; ) : null&nbsp; &nbsp;)}分叉沙盒：https://codesandbox.io/s/romantic-shannon-10gme?fontsize=14&hidenavigation=1&theme=dark