Question

我正在按照本教程关于https://scotch.io/tutorials/learning-react-getting-started-and-concepts的ReactJS入门，并遇到了这个通用代码，它有两个不同的return语句括号。

var MyComponent = React.createClass({
getInitialState: function(){
    return {
        count: 5
    }
},
render: function(){
    return (
        <h1>{this.state.count}</h1>
    )
}
});

为什么他们不一样？交换其中任何一个都会导致错误。

Answer 1

第一个是对象的有效JS返回，第二个是分组操作符。在return语句中使用(stuff && moreStuff)将返回括号内代码的结果，无论可能是什么。

在这种情况下，括号内有一些特殊的JSX，浏览器无法理解。在执行之前（通常在编译时）将其转换为react.createElement(...)个调用的嵌套树。 JSX只是为了方便您提供类似HTML的体验。

正如我所说，括号只返回内部的结果，所以你可以在其中返回一个对象，这在编写短箭头函数时很有用：const mergeObject = (obj1, obj2) => ({ ...obj1, ...obj2 })而不是：

const mergeObject = (obj1, obj2) => {
  return {
    ...obj1,
    ...obj2,
  };
}

return语句中的两个不同的括号语法

1 个答案: