Question

我在下面的代码中的“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>

如果我删除了开关/盒子上的默认设置，我会得到同样的东西。公平地说，这可能是我第一次在React中执行switch语句。

编辑：答案：这是最终的代码。我创建了一个对象来索引正确的属性： const HeaderToAttribute = { “项目”：“产品”， “配件”：“配件”， “添加Ons”：“add_on” }

     <tbody>
        {items.map((item, index) => (
          <tr key={index}>
            { tileView &&
              (item[HeaderToAttribute[header]].pictures[0]
              ? <td><img src={item[HeaderToAttribute[header]].pictures[0].url} alt={item.name}/></td>
              : <td><Items/></td>)
            }
            <td>{item.name}</td>
            <td>{item.quantity}</td>
            <td>
              <FormattedNumber
                value={item.selectedPrice ? item.selectedPrice : 0}
                style="currency"
                currency="USD"
              />
            </td>
          </tr>
        ))}
      </tbody>

Answer 1

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

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

检查DOC。

像这样使用：

(unsigned long int)(-3365) % (unsigned long int)(15156) = 2555 (ULONG_MAX + 1 -3365) % 15156 = 2555

像这样定义<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

如果/然后Render在React代码中失败

1 个答案: