Question

我正在使用React JS和JSX开发应用程序。这是一种在职培训。我注意到的一件事是，对于两种不同类型的代码，我得到相同的结果。我想进一步了解这一点。有人可以解释一下吗？

代码块一

{
    this.state.entities.map((entity, index) => {
        return <Link key={index} to={{ pathname: '/details/'}}>{entity.main_question}</Link>
    })
}

第二个代码块

{
    this.state.entities.map((entity, index) => (
        <Link key={index} to={{ pathname: '/details/' }}>{entity.main_question}</Link>
    ))
}

Answer 1

javascript的map函数遍历对象数组并返回每次迭代的值。

示例：在普通的JS中，

const arr=[1,2,3,4,5];
const squared=arr.map(function(value){return value*value})//squared=[1,4,9,16,25]

现在使用箭头功能，您可以按以下方式编写回调

const squared=arr.map((value)=>value*value)//This is same as return value*value in the function body.

Answer 2

关于代码块一：

使用=> {}大括号时，必须使用return

{
    array.map((item, index) => {
        return something
    })
}

代码块二：

使用=> ()时，它将直接返回表达式或组件，而无需在此处添加return

 {
        array.map((item, index) => ( something ))
 }

现在问题出现在您的脑海中，何时使用哪一个：

通常，如果您有一些条件，则使用代码块1：

{
        array.map((item, index) => {
            if(some_codition_here){
              return something;
            }else{
              return something_else;
            }
        })
}

如果没有条件，则可以使用代码块2。

Answer 3

答案就在代码本身中

在这种情况下，您使用的是= {}，因此您必须编写关键字return

{
    this.state.entities.map((entity, index) => {
        return <Link key={index} to={{ pathname: '/details/'}}>{entity.main_question}</Link>
    })
}

在这种情况下，您使用的是=（），因此您不必使用return

{
    this.state.entities.map((entity, index) => (
        <Link key={index} to={{ pathname: '/details/' }}>{entity.main_question}</Link>
    ))
}

因为它是ES6中的新功能，所以基本上就像是在没有

的情况下写在一行中

使用地图反应jsx渲染

3 个答案: