了解es6和jsx的反应

我正在通过官方的redux教程。 http://redux.js.org/docs/basics/UsageWithReact.html了解es6和jsx的反应

在文件

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

我很奇怪，为什么功能链接接受由大括号括起来的变量。其次，if语句块中的return语句具有span jsx标签，但没有大括号，但其次，带有<a>标记的if语句块外的return语句带有大括号。谁能解释为什么？

编辑：在从答案中找出解构赋值之后，我阅读下面的文章，了解如何在函数中使用它，它变得非常清晰。 https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

来源

2016-08-26 Muhammad Raihan Muhaimin

这是一个stateless function，你可以定义反应类为纯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; 
    ....

关于您使用括号当你的JSX元素有回报多于1行。

来源

2016-08-26 15:57:42

这不完全正确。当您从对象中提取值作为函数参数时，这些值不是常量。 –

@AnthonyDugois问题的关键不在于它们是否是const或let，可以根据情况将var指定为let或const，意图是显示Destructing的工作方式，而不是内部值是常量与否。 –

@DiogoCunha谢谢你的回答。我认为这个链接很好地解释了解构赋值如何与函数一起工作。 https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/ 你认为你可以添加到你的答案。 –

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

JSX的大括号在这里保持缩进清晰。

你可以这样做：

return <div> 
    lol 
    </div>

但你不能做到这一点：

return 
    <div> 
    lol 
    </div>

因此，保持JSX的缩进干净，你必须换用大括号标记。

来源

2016-08-26 15:57:06

了解es6和jsx的反应

回答

相关问题