为什么最好的做法是用括号将分配给变量的 JSX 括起来？

Question

在下面的示例中，x 和 y 的输出相同。我见过两种方式编写的 React 代码。有区别吗？由于我看到的许多 React 代码示例都使用括号语法，因此我认为这是有原因的。如果这是最佳实践，那么为什么用括号将分配给变量的 JSX 括起来是最佳实践？如果还有其他原因是什么？

let x =  <div> Hello World! </div>;
let y = (<div> Hello World! </div>);

console.log(x,y);

Answer 1

通常括号用于包装JSX代码以保持代码清晰......也就是说，

let y = <ul>
    <li>
        Hello World!
    </li>
</ul>;

丑陋但正确

let y = 
    <ul>
        <li>
            Hello World
        </li>
    </ul>;

格式更好但语法不正确（会在编译时出错）。

所以解决方案是使用

let y = (
    <ul>
        <li>
            Hello World
        </li>
    </ul>
);

这是两全其美的。

更新：第二个代码不正确的原因是自动分号插入。感谢@EricKing 指出这一点。

Answer 2

建议这样做有两个原因，

第一，它帮助 javascript 解释器找到赋值的结尾，因为有时，解释器可能会读取return代码中间出现的类似 的语句，并在那里结束赋值。

其次，它有助于提高可读性和缩进，无论谁阅读代码，都知道赋值在哪里结束。当您阅读大文件时，很容易迷失方向。

return 
  <div> Your text here </div>

将被解释为

return;
<div> Your text here </div>;

因此，为了避免这种情况，最好在 JSX 周围加上括号

return (
    <div> 
       Your text here 
    </div>
)