Question

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

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

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

当我看到其他类似的例子时：

const Nav = () => {
  return (
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>
  )
}

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

谢谢

Answer 1

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

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

有关更多信息，请参考MDN documentation。

Answer 2

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

如果您在=>函数内部使用大括号（例如，多语句主体）包裹了函数体，则不再有隐式返回。

例如

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绑定，这使其适合于以下事件中的事件处理程序：网页脚本，例如。

Answer 3

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

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

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

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

解析为

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

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

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

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

Answer 4

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

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

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

那等于

() => { // Block body
   return { name : 'Amanda' }
}

括号还用于对JavaScript return语句上的多行代码进行分组，以防止分号自动插入错误的位置。

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  
  render() {
    return (<div> 
            *
            </div>) // <--JavaScript engine inserts semicolon here
  }
}

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

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

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  
  // Not required to wrap brackets around a single line of code
  render() {
    return <div>*</div>;
  }
}

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

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

4 个答案: