理解 React 中的 es6 和 jsx

Question

我正在阅读官方的 redux 教程。 http://redux.js.org/docs/basics/UsageWithReact.html

在文件中

components/Link.js有如下代码

import React, { PropTypes } from 'react'

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a href="#"
       onClick={e => {
         e.preventDefault()
         onClick()
       }}
    >
      {children}
    </a>
  )
}

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

export default Link

我想知道为什么函数 link 接受花括号括起来的变量。其次，if 块内的 return 语句具有不带大括号的 span jsx 标记，但其次，带有 <a> 标记的 if 块外的 return 语句具有大括号.谁能解释一下为什么？

编辑： 从答案中了解解构赋值后，我阅读了以下有关如何在函数中使用它的文章，这对我来说变得非常清楚。 https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

Answer 1

函数参数使用 destructuring assignment 从对象中提取值。

JSX 周围的大括号是为了保持缩进干净。

你可以这样做：

return <div>
    lol
  </div>

但是你不能这样做:

return
  <div>
    lol
  </div>

因此，为了保持 JSX 的缩进干净，您必须用大括号将标记括起来。

Answer 2

那是 stateless function，你可以将 react 类定义为没有状态和生命周期方法的普通 JS 函数

大括号放在那里是为了使用一个叫做 Destructuring 的惊人的 es6 特性。

基本上使用 es6 与做的一样：

const Link = (props) => {
   const { active, children, onClick } = props;
   ...

不使用 ES6 和做一样：

const Link = (props) => {
   const active = props.active;
   const children = props.children;
   const onClick = props.onClick;
   ....

关于 return 当您的 jsx 元素超过 1 行时您使用方括号。

理解 React 中的 es6 和 jsx

Understand es6 and jsx in react

jsx

ecmascript-6

reactjs

react-jsx

redux