Reactjs 如果/然后在React代码中渲染失败

下面代码中的“if”语句出现语法错误。我疯了吗？我知道它很长，但它仍然返回一个根元素，对吗

      <tbody>
        {items.map((item, index) => (
          <tr key={index}>
            {if (tileView) {
              switch (header) {
              case "Items":
              (item.product.pictures[0]
              ? <td><img src={item.product.pictures[0].url} alt={item.name}/></td>
              : <td><Items/></td>)
              break;
              case "Accessories":
              (item.accessory.pictures[0]
              ? <td><img src={item.accessory.pictures[0].url} alt={item.name}/></td>
              : <td><Items/></td>)
              break;
              case "Add Ons":
              (item.add_on.pictures[0]
              ? <td><img src={item.add_on.pictures[0].url} alt={item.name}/></td>
              : <td><Items/></td>)
              break;
              default:
              break;
            }}}
            <td>{item.name}</td>
            <td>{item.quantity}</td>
            <td>
              <FormattedNumber
                value={item.selectedPrice ? item.selectedPrice : 0}
                style="currency"
                currency="USD"
              />
            </td>
          </tr>
        ))}
      </tbody>

{items.map（（项，索引）=>(
{if（tileView）{
开关（收割台）{
案例“项目”：
（项目.产品.图片[0]
? 
: )
打破
案例“附件”：
（项目.附件.图片[0]
? 
: )
打破
案例“附加组件”：
（项目添加到图片[0]
? 
: )
打破
违约：
打破
}}}
{item.name}
{item.quantity}
))}

如果我删除开关/机箱上的默认值，我会得到相同的结果。平心而论，这可能是我第一次在React中使用switch语句

编辑:答复: 这是最后的代码。我创建了一个对象来索引右属性： const HeaderToAttribute={ “项目”：“产品”， “附件”：“附件”， “附加组件”：“附加组件” }

{items.map（（项，索引）=>(
{tileView&&
（项目[HeaderToAttribute[header]]。图片[0]
? 
: )
}
{item.name}
{item.quantity}
))}

我们不能在JSX中使用if-else，使用这些条件从render方法调用函数并将所有逻辑放在其中。如果contion与任何情况匹配，请不要忘记返回元素

为什么我们不能在JSX中使用if-else

检查一下

像这样使用它：

<tbody>
   {items.map((item, index) => (
      <tr key={index}>
         {
           tileView && this._renderElement(item, header)
         }
         <td>{item.name}</td>
         <td>{item.quantity}</td>
         <td>
           <FormattedNumber
              value={item.selectedPrice ? item.selectedPrice : 0}
              style="currency"
              currency="USD"
            />
         </td>
       </tr>
  ))}
</tbody>

_renderElement(item, header){
    switch (header) {
         case "Items": return item.product.pictures[0] ? 
                      <td>
                        <img src={item.product.pictures[0].url} alt={item.name}/>
                      </td>
                      : <td><Items/></td>
         case "Accessories": return item.accessory.pictures[0] ?
                    <td>
                      <img src={item.accessory.pictures[0].url} alt={item.name}/>
                    </td>
                    : <td><Items/></td>)
         case "Add Ons": return item.add_on.pictures[0] ?
                      <td>
                        <img src={item.add_on.pictures[0].url} alt={item.name}/>
                      </td>
                      : <td><Items/></td>
         default: return null;
    }
}

---

我们不能在jsx中使用if-else，请检查以下内容：要使用if-else，请将所有逻辑放在一个函数中，并从render方法调用该函数。很难遵循这个长条件，但似乎在所有情况下都没有返回某些内容switch-case的问题是没有重新调整任何内容。在if-else中，您可以将要返回的对象作为最后一条语句，它将在没有显式返回的情况下工作。在switch情况下，最后一条语句是

break

，因此您不会返回任何内容。您必须替换

（…）；中断带有显式的
返回（…）
。谢谢Sulthan！这就是我需要的！
_renderElement(item, header){
    switch (header) {
         case "Items": return item.product.pictures[0] ? 
                      <td>
                        <img src={item.product.pictures[0].url} alt={item.name}/>
                      </td>
                      : <td><Items/></td>
         case "Accessories": return item.accessory.pictures[0] ?
                    <td>
                      <img src={item.accessory.pictures[0].url} alt={item.name}/>
                    </td>
                    : <td><Items/></td>)
         case "Add Ons": return item.add_on.pictures[0] ?
                      <td>
                        <img src={item.add_on.pictures[0].url} alt={item.name}/>
                      </td>
                      : <td><Items/></td>
         default: return null;
    }
}