为什么我需要嵌套JSX的花括号,即使没有它也可以

时间:2018-02-22 16:12:47

标签: javascript reactjs jsx

如果我有这段代码

$var = 5;  $q = DB::select(array(DB::expr("(table.field - 0)", [$var]),'aliasname'))->from('table')->where('id','=',$id);

与此

的工作原理相同
var myDiv = <div>
               <h1>Hello World</h1>
            </div>
那为什么我需要大括号呢?

1 个答案:

答案 0 :(得分:5)

  那为什么我需要大括号呢?

你没有,你的第一个片段就好了(除了最后丢失的分号:-))。实际上,你的第二个例子不会编译。

如果您的意思是(),而不是{},则可能指的是the React documentation's suggestion that you use () around things like that。正如它在文档中所说,这纯粹是为了避免自动分号插入危险。像您的代码一样,分配中没有ASI危险,但使用return时会有

// Works
return (
    <div>
        <h1>Hello World</h1>
    </div>
);

// Also works
return <div>
        <h1>Hello World</h1>
    </div>;

// Also works
const div =
    <div>
        <h1>Hello World</h1>
    </div>;
return div;

// FAILS
return
    <div>
        <h1>Hello World</h1>
    </div>;

最后一个失败是因为ASI在return之后和JSX之前插入分号,使得你的函数不返回任何内容。