Javascript React组件不使用花括号渲染

我的react组件不使用花括号渲染，下面是代码：

R1类扩展了React.Component{
render（）{
返回(
{this.props.data.map（datum=>
{datum}
)}
);
}
}
类R2扩展了React.Component{
render（）{
返回(
{this.props.data.map（datum=>{
{datum}
})}
);
}
}

请注意，R1和R2组件之间的唯一区别是R1在映射中的“=>”之后不使用{}，而R2使用。R1工作正常，但R2不渲染任何内容

我对javascript和react非常陌生（来自C/C++），我认为对于多行块，{}应该包括在内。但很明显，它在这里不起作用

只是想知道这是javascript特有的语法问题还是与React有关？在函数映射中使用{}有什么问题

---

PS：在实际代码中，如果有任何区别，我使用不可变列表而不是普通javascript列表。

因为您使用的是ES6，所以主要语法如下

functionName() => {
    /* Code/Actions goes here */
}

---

第二个示例的

map

回调没有返回任何内容

如果方法体包含一条语句，则可以省略

{}

，并返回表达式的结果。使用

x=>x*2

可以，并将返回一个值

如果在方法体周围包含

{}

，则无论

{}

中有多少语句，都不能忽略

return

关键字。使用

x=>{x*2}

不会返回任何内容，因为方法体不包含返回语句

举例来说：

fn=x=>x*2
console.log（fn（3））//6
fn=x=>{x*2}
console.log（fn（3））//未定义
fn=x=>{return x*2}
console.log（fn（3））//6

但是，R2不呈现任何内容。可能是因为它是一个对象，或者是因为ur读取了错误的值？这个答案是错误的，问题中的代码在语法上是正确的

x=>{/*…*/}

与

（x）=>{/*…*/}

一样有效。当函数接受一个参数时，可以省略该参数周围的括号。

functionName() => {
    /* Code/Actions goes here */
}