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在＆＃34; =＆gt;＆＃34;之后不使用{}在地图中，而R2确实如此。 R1工作正常，但R2不会呈现任何内容。

我是javascript的新手并做出反应（来自C / C ++），我认为对于多行块，{}应该包括在内。但它显然不在这里工作。

只是奇迹是这个特定于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

Answer 2

由于您使用的是ES6，因此主要语法类似于

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

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

2 个答案: