提问人：Dmitry 提问时间：3/22/2017 最后编辑：Dmitry 更新时间：1/5/2020 访问量：286
这种奇怪的 JavaScript 语法似乎将 HTML 标签与 JavaScript 混合在一起是什么？
What is this weird JavaScript syntax that seems to mix HTML tags with JavaScript?
问：
我看到了一个有趣的javascript代码，但不明白它是什么意思，以及为什么当我尝试在控制台中测试它时它会返回一个错误。
下面是一个代码示例：
const Component = ({name}) => (<div>Hello {name}</div>)
它是与 ES6 相关的东西还是什么？
PS：我想我可以以这种方式在渲染函数中使用它：
<Component name={'John'} />
右？
答：
0赞
Vladu Ionut
3/22/2017
#1
您无法在浏览器控制台中测试 JSX 语法。
JSX 只是为函数提供了语法糖，因此编译器（我认为您的情况是 Babel）会将 jsx 转换为 JS 代码（请看这里-->https://babeljs.io/docs/plugins/transform-react-jsx/）。React.createElement(component, props, ...children)
1赞
MarcelD
3/22/2017
#2
就像 Vladu Ionut 指出的那样 -> 它看起来像一个 jsx 返回 （Hello {name}） 所以它可能来自一个反应应用程序......
无论如何，对于您的问题： const 是 ES6 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/const
（foo） => {“酒吧”} 是一个带有参数 foo 的箭头函数，它返回 “bar” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
（{name}） => ... 解构赋值 - >一个对象作为参数传递，它只会从对象中获取名称并将其传递给函数而不是整个对象。https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
正如 Vladu Ionut 再次正确指出的那样，这不能直接在您的浏览器中使用，因为您的浏览器可能不支持它，这就是为什么您必须先用例如 Babel https://babeljs.io 进行转译
评论
0赞
Dmitry
3/22/2017
我正在使用 react-native run-ios，我想它的作用与 Babel 相同？@MarcelD
0赞
MarcelD
3/22/2017
run-iso 可能会在启动模拟器并运行应用程序之前创建捆绑包（为您进行转译）......不确定它是否将其转译为 js，应该是 C/C++ 代码 - 但不确定 tbh...
0赞
Erik Bongers
1/5/2020
#3
这不是普通的javascript。这是特定于 ReactJS 框架的 JSX 代码。 通常，此代码位于扩展名为 .jsx 的文件中。如果您设置了 ReactJS 开发环境，则此代码将从 JSX 编译（或转译）为纯 javascript。
ReactJS.org 建议你使用 Babel 编译器，但请注意，仅仅编译你的代码片段在完整的 react 设置之外是行不通的。
评论
({name}) => (<div>Hello {name}</div>)这是一个胖箭头功能，请搜索google，它是一种样式ES6