Reactjs &引用；逗号运算符的左侧……”；呈现的html内容中存在错误

其直接的过程

以下是我希望的原始渲染方法（我希望我的表位于div之外）：

但是jsx编译器出于某种原因不允许它

但是如果我将表移动到div元素内部； 一切看起来都很好。

---

所以，唯一不同的是桌子的位置为什么jsx会干扰这个过程？为什么它是必需的？

在

JSX

中，我们只能从

return

返回一个

html

元素，不能返回多个元素，如果要返回多个元素，请将所有html代码包装在

div

中或通过任何其他包装器组件

在第一种情况下也会发生同样的情况，返回2个元素，一个

div

和一个

table

。当您将它们包装在一个

div

中时，一切都正常工作

对于组件的

条件呈现

，必须遵循相同的规则

例如：

正确：

{ 1==1 /* some condition */ ? 
    <div>
        True
    </div> 
: 
    <div>
        False
    </div>
}

{ 1==1 /* some condition */ ? 
    <div>
        True 1
    </div>
    <div>
        True 2
    </div> 
: 
    <div>
        False 1
    </div>
    <div>
        False 2
    </div>
}

{1==1/*某些条件*/？
真的
: 
假的
}

错误：

{ 1==1 /* some condition */ ? 
    <div>
        True
    </div> 
: 
    <div>
        False
    </div>
}

{ 1==1 /* some condition */ ? 
    <div>
        True 1
    </div>
    <div>
        True 2
    </div> 
: 
    <div>
        False 1
    </div>
    <div>
        False 2
    </div>
}

{1==1/*某些条件*/？
真1
真实2
: 
错误1
错误2
}

只是一个快速更新。如果您使用的是React v16.2.0及更高版本，也可以使用

返回(
真1
真实2
);

---

我还回答了一个类似的问题，更深入地说，这个错误的另一个原因是不小心用逗号而不是分号结束了你的行，这可能是因为你在重构代码时出错了

这些都是错误的

return <div>hi</div>, // error
return (<div>hi</div>,) // error

返回hi，//错误
return（hi，）//错误

这些是正确的：

return <div>hi</div>; // ok
return (<div>hi</div>) // ok
return (<div>hi</div>); // ok

返回hi；//好啊
return（hi）//ok
返回（hi）；//好啊

---

在这种情况下，此错误更加复杂，因为它突出显示整个JSX块，而不是逗号。当逗号被解释为“逗号运算符”而不是数组、对象等中的逗号时，会发生此错误

逗号运算符计算每个用逗号分隔的表达式，并返回最后一个值

const foo = (1, 2, 3) // returns 3

在本例中，3将被分配给foo。但作者认为（1，2，3）很可能会像python元组一样被赋值。所以这个错误是存在的

因此，如果遇到此错误，数组/对象/etc中可能存在一些错误，并将其解释为“逗号运算符”

导致此错误的示例代码。

const foo = (expr) => {
  const bar = ""
  const baz = ""

  switch (expr) {
    case 'Oranges', 'Mangoes': // error, you can't use comma for switch
      break;
    case 'Papayas':
      break;
  }


  { bar, baz } // You forgot to write return. Javascript thinks this is comma operator.
}

---

我不知道，现在有意义了。如果是React，您也可以使用

React.Fragment

或

速记。