"逗号运算符的左侧.."渲染的html内容中的错误

Question

它直截了当的过程;

这是我希望它的原始渲染方法(我希望我的表在div之外):

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

但是如果我把桌子移到div元素里面; 一切看起来都不错

所以只有差异是桌子的位置.为什么jsx会干扰这个过程？为什么有必要？

Answer 1

在JSX,我们只返回一个html元素return,不能返回多个元素,如果要返回多个元素,则将所有html代码div包装在一个或任何其他包装器组件中.

你的第一种情况也是如此,你要归还2个元素,一个div和一个table.当你把它们包在一起时,div一切都正常.

conditional rendering组件必须遵循相同的规则.

例:

正确:

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

Answer 2

只是一个快速更新.如果您使用的是React v16.2.0及更高版本,则还可以使用Fragments.

  return (
    <>
        <div>
            True 1
        </div>
        <div>
            True 2
        </div> 
    </>
  );

我也回答了一个类似的问题,在这里更深入