为什么我们在这个 javascript 函数中需要双括号？ [复制]答案

【问题标题】：Why do we need double braces in this javascript function? [duplicate]为什么我们在这个 javascript 函数中需要双括号？ [复制]
【发布时间】：2020-11-15 13:28:13
【问题描述】：

我是 JavaScript 的初学者，很困惑为什么我们需要在 style{{display: '', justifyContent: ''}} 中使用双括号。当我应该使用return () 和return {} 时，我也很困惑。

import React from 'react';

const Navigation = () => {
    return (
        //navigation 'Sign Out' on top right
        <nav style={{display: 'flex', justifyContent: 'flex-end'}}>
            <p>Sign Out</p>
        </nav>
    );
}

export default Navigation;

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

首先，您正在编写 JSX，它看起来像 HTML，但具有 javascript 语法。

（JSX 代表 JavaScript XML。JSX 允许我们在 React 中编写 HTML。JSX 使在 React 中编写和添加 HTML 变得更加容易。）

所以，当你想在 JSX 中引用一个 Javascript 对象时，你使用{}，假设你有这个：


const text = 'Hi There!';

如果您希望该文本在 HTML <p> 标记中呈现，您可以编写如下内容：


<p> { text } </p>

在这种情况下：style={{display: 'flex', justifyContent: 'flex-end'}}，第一个{} 表示您要引用一个javascript 变量，第二个{ display: ... } 是javascript 变量本身。（JSX 中的样式被定义为与 HTML 样式属性不同的对象）。

关于返回{} 或() 的第二部分非常简单，当你有一个多行return 语句时使用()，当你只是返回一个普通（文字）javascript 对象时使用{} .

【讨论】：

【解决方案2】：

因为这不是 JS，所以这是特定于 ReactJS 和样式Inline Styling ReactJS

【讨论】：

【解决方案3】：

style={{display: 'flex', justifyContent: 'flex-end'}}>

这里的外括号 {} 表示一个变量示例

const nameOfClass="some-class"
className={nameOfclass}
//or directly
className="some-class"

第二个表示一个对象

const styleExample={color: 'blue'};
<div style={styleExample} >
//or we can directly write
<div style={{color: 'blue'}} >

什么时候使用（vs {

// here we use ( to avoid that it get confused with just return
//this will work
return (
 <p> test </p>
);

这并不总是有效（并且可能会使读者感到困惑我们无法判断是否返回（无，未定义）或返回我们在下一行中找到的内容，请记住第一个例子没有混淆

return  
 <p> test </p>

【讨论】：

【解决方案4】：

它是 ReactJS，语法叫做jsx

【讨论】：

【解决方案5】：

为什么需要两个花括号？

第一个花括号是 JSX 中的特殊语法。它用于在编译期间评估 JavaScript 表达式。 JavaScript 表达式可以是变量、函数、对象或任何解析为值的代码。

第二个是表示样式属性的 JSON 对象。

什么时候用括号？

括号用于对 JavaScript 返回语句中的多行代码进行分组，以防止分号自动插入错误的位置。

在 JavaScript 中不需要添加分号。 JavaScript 引擎会在第一个可能的机会在 return 语句之后的一行中自动插入一个分号。如果 JavaScript 引擎将分号放在不应该的位置，您的代码将无法编译。

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  
  render() {
    return <div>  // <--JavaScript engine inserts semicolon here
           *
           </div>
  }
}

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  
  render() {
    return (<div> 
            *
            </div>) // <--JavaScript engine inserts semicolon here
  }
}

【讨论】：

【解决方案6】：

那是因为style={} 大致相当于转译后的 JS 中的style:。

import React from 'react';

const Navigation = () => {
    return (
        //navigation 'Sign Out' on top right
        <nav style={{display: 'flex', justifyContent: 'flex-end'}}>
            <p>Sign Out</p>
        </nav>
    );
}

export default Navigation;

变成

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const Navigation = () => {
  return (
    /*#__PURE__*/
    //navigation 'Sign Out' on top right
    _react.default.createElement("nav", {
      style: {
        display: 'flex',
        justifyContent: 'flex-end'
      }
    }, /*#__PURE__*/_react.default.createElement("p", null, "Sign Out"))
  );
};

var _default = Navigation;
exports.default = _default;

所以用一组大括号，我们说：

React.createElement('nav', { style: display: 'flex', justifyContent: 'flex-end' }) 这是一个语法错误。

带两组大括号：

React.createElement('nav', { style: {display: 'flex', justifyContent: 'flex-end' }})

参考文献

Babel.js Playground for link

【讨论】：