Question

我意识到箭头功能主体可以包含在方括号中，但是当它没有方括号时，什么决定了函数何时终止？

我不确定这个问题是ES6的通用问题还是特定于ReactJS或JSX，但是我在React中具有以下功能，在它的下面，我有一个类声明的开始，即不在功能范围内：

const Search = ({ value, onChange, children }) =>
  <form>
    {children} <input 
      type="text"
      value={value} 
      onChange={onChange}
    />
  </form>

class Table extends Component {
  ...
  ...
  ...

这似乎是有效的。使它不包含类声明的函数有什么作用？它们之间是否有空白行？它是JSX特有的吗？是否因为有单个容器元素作为函数的主体？或者是别的什么？

Answer 1

您可以将箭头功能括在{}

中

const doSomething = () => {
  // ...
  return 'val'; // return statement is optional
}

如果箭头函数只有一行代码，则隐含地理解这是一个return语句，您不必将它们包装在{}

中

例如，这两个功能都相同。

// explicit return
const doSomething = () => {
  return 'val';
}

// implicit return
const doSomething = () => ('val')

您可以通过几种不同的方式编写隐式收益

// implicit return with ()
const doSomething = () => ('val')

// implicit return without ()
const doSomething = () => 'val'

// implicit return in next line with ()
const doSomething = () => 
  ('val')

// implicit return in next line without ()
const doSomething = () => 
  'val'

这就是React所做的。编译babel时，React组件中的顶级<tag>将返回类似React.createElement(...)

的语句

例如，这个

const Search = ({ value, onChange, children }) =>
  <form>
    {children} <input 
      type="text"
      value={value} 
      onChange={onChange}
    />
  </form>

将被移植到

const Search = ({ value, onChange, children }) => React.createElement(...)

Answer 2

您在Search声明中返回一个表达式。编译器读取在该表达式末尾（即结束的jsx标记）的声明。就我个人而言，我更喜欢将jsx () => (<div></div>)包装起来只是为了提高可读性，但是您的代码没有错。

什么决定JavaScript ES6箭头函数何时结束？

2 个答案: