为啥用括号括住分配给变量的 JSX 是最佳实践？

Posted 2023-02-21

【中文标题】为啥用括号括住分配给变量的 JSX 是最佳实践？

【英文标题】：Why is it best practice to surround JSX assigned to variables with parenthesis?为什么用括号括住分配给变量的 JSX 是最佳实践？

【发布时间】：2018-12-27 21:12:33

【问题描述】：

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

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

console.log(x,y);

【问题讨论】：

你标题中的问题和正文中的问题不一样。你真正要问的是哪一个？

添加括号的常见原因是覆盖默认运算符优先级（如果结果相同，则此处不需要），或者只是为了使代码读者更清楚意图。

返回多行 JSX 时，最好使用括号，否则您可能会遇到此答案中提到的问题。 ***.com/questions/41898972/…

【参考方案1】：

建议这样做有两个原因，

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

第二，它有助于提高可读性和缩进，阅读代码的人都知道赋值结束的地方。当你阅读一个大文件时很容易迷失方向。

return 
  <div> Your text here </div>

将被解释为

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

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

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

【参考方案2】：

为了代码的清晰，一般用括号来包裹 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>
);

这是两全其美的。

更新：第二个代码不正确的原因是Automatic Semicolon insertion。感谢@EricKing 指出这一点。

【讨论】：

要进一步解释为什么第二个例子不正确（以及为什么括号修正它），你可以阅读automatic semicolon insertion。

我认为您答案中的自动分号插入链接不正确。它指出了一些关于 *** 的不相关问题。

@EricKing 另外，使用第二种语法我没有收到任何错误。见codesandbox.io/s/crazy-frog-d05ly。 （如果链接失效，请告诉我）

【参考方案3】：

在将 html 代码分配给变量 (jsx) 时，括号不会有太大区别，但我想指出它在使用箭头函数时甚至在制作无状态组件时的优势。

const FunctionName = () => 
 return <p>Hello World </p>;
;

注意在上面的代码中，我们必须在使用花括号的时候编写return关键字，但是如果你想更简洁可以使用括号......

const FunctionName = () => (
 <p> Hello World </p>
); 

//or write it in one line as well

const FunctionName = () => ( <p> Hello World </p> );  

【讨论】：

这似乎没有回答问题..例如为什么不将返回语句写为return (<p>Hello World </p>);。

你可以这样写，但是括号允许你省略return关键字，这是一种更简洁的方式，这实际上是使用括号的原因。我只是没有在上面的回答中明确说明。如果你愿意，我可以编辑我的答案..

我从来没有说过你所说的不正确..只是它没有回答问题。上述所有编写代码的方式都是正确的，OP 给出的两个示例也是正确的……问题是什么使一个比另一个更好。是的，如果您可以编辑您的答案来解释为什么首选一个而不是首选什么，那就太好了。

圆括号不允许你省略return关键字，它删除了这样做的大括号。你可以有const FunctionName = () => <p> Hello World </p>;。