关于javascript：为什么我可以在React中省略带有括号的return语句


Why can I omit the return statement with parenthesis in React

对React来说还很陌生，可能有一个愚蠢的问题。

我怎么可能省略带有括号的Reacts return语句。

1
2
3
4
5
const Nav = () => (
  <nav className="c_navbar">
    { some jsx magic here }
  </nav>
)

而我看到其他类似的例子：

1
2
3
4
5
6
7
const Nav = () => {
  return (
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>
  )
}

据我了解()帮助，当我返回对象文字时，它不会将其与代码块混淆。 但是我觉得这里不适用吗？

谢谢

相关讨论

它不是一种特别的React语法，而是一种JavaScript。
箭头功能声明有两种类型的主体类型

  • 简洁的主体-隐式返回值。
  • 块主体-需要显式的return。

    • 有关更多信息，请参考MDN文档。

    这是一个JavaScript问题，而不是React问题。

    1)圆括号()用于箭头函数以返回对象。

    1
    () => ({ name: 'Amanda' })  // Shorthand to return an object

    那相当于

    1
    2
    3
    () => { // Block body
       return { name : 'Amanda' }
    }
  • 括号还用于对JavaScript return语句上的多行代码进行分组，以防止将分号自动插入错误的位置。

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    class StarsComponent {
      constructor(size) {
        this.size = size;
      }
     
      render() {
        return (
                *
                ) // <--JavaScript engine inserts semicolon here
      }
    }

    为什么？将左括号放在与return相同的行上时：
    返回(
    您告诉JavaScript引擎，在方括号关闭之前，它无法自动插入分号。

    对于单行语句，我们不需要将其包装在方括号内。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    class StarsComponent {
      constructor(size) {
        this.size = size;
      }
     
      // Not required to wrap brackets around a single line of code
      render() {
        return *;
      }
    }

    可以在这里找到更多信息：https://medium.com/@leannezhang/curly-braces-versus-parenthesis-in-reactjs-4d3ffd33128f

    相关讨论

    第一个代码段是隐式返回。括号仅用于开发人员的方便；可以在没有代码的情况下明确解析代码，但会降低可读性：

    1
    2
    3
    4
    const Nav = () =>
      <nav className="c_navbar">
        { some jsx magic here }
      </nav>

    而第二个片段包含显式返回。这是在React中常用括号的情况，因为当return语句后没有可选表达式时，就没有返回值。

    1
    2
    3
    4
      return
        <nav className="c_navbar">
          { some jsx magic here }
        </nav>

    被解析为

    1
    2
    3
    4
      return;
      <nav className="c_navbar">
        { some jsx magic here }
      </nav>

    为了正确解析而不带括号，应该为：

    1
    2
    3
      return <nav className="c_navbar">
        { some jsx magic here }
      </nav>

    因此，括号通常用于隐式和显式返回中的一致性，并允许使用适当的缩进来提高可读性。

    相关讨论

    在JavaScript中，( params ) => x语法与[x1>]等效[1]，因此return在那里，只是隐式的。

    如果您在=>函数内部将函数主体括在花括号中(例如，多语句主体)，则不再有隐式返回。

    例如

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var someFunc1 = function( x, y, z ) {
        return x + y + z;
    };

    var someFunc2 = ( x, y, z ) => x + y + z;

    var someFunc3 = ( x, y, z ) => {
        var result = x + y + z
        return result ;
    }

    [1]-使用=>的函数与function()函数类似，但是它们还具有无法重新绑定的隐式this绑定，这使得它们适用于网页脚本中的事件处理程序。

    相关讨论