javascript - React 组件不使用大括号进行渲染

Question

我的 react 组件不使用大括号进行渲染，代码如下: https://jsfiddle.net/69z2wepo/21704/

class R1 extends React.Component {

    render() {
        return (
            <div className="r1">
                {this.props.data.map( datum => 
                    <h1 key={datum}> {datum} </h1>
                )}
            </div>
        );
    }
}

class R2 extends React.Component {
    render() {
        return (
            <div className="r2">
                {this.props.data.map( datum => {
                    <h1 key={datum}> {datum} </h1>
                })}
            </div>
        );
    }
}

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

我对 javascript 和 React (来自 C/C++) 很陌生，我认为对于多行 block ，应该包含 {} 。但它显然在这里行不通。

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

PS:在实际代码中，我使用不可变列表而不是普通的 javascript 列表(如果这有什么区别的话)。

Answer 1

您的第二个示例的 map 回调不会返回任何内容。

如果您的方法主体包含单个语句，您可以省略 {} 并且将返回表达式的结果。使用 x => x * 2 就可以了，并且会返回一个值。

如果您在方法主体周围包含 {}，您就不能省略 return 关键字，无论该方法内部有多少条语句{}。使用 x => { x * 2 } 不会返回任何内容，因为方法主体不包含 return 语句。

举个例子:

fn = x => x * 2
console.log(fn(3)) // 6

fn = x => { x * 2 }
console.log(fn(3)) // undefined

fn = x => { return x * 2 }
console.log(fn(3)) // 6