如何使用 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) =>

   (

    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> 

   }                                        

))};

到：

   {products.map((c) =>

     c.ID === 1 ? (

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

    ) : null

   )}

分叉沙盒：

https://codesandbox.io/s/romantic-shannon-10gme?fontsize=14&hidenavigation=1&theme=dark