javascript - 这种似乎将 HTML 标签与 JavaScript 混合在一起的奇怪 JavaScript 语法是什么？

Question

我看到了一段有趣的 JavaScript 代码，但不明白它的含义以及为什么当我尝试在控制台中测试它时它会返回错误。

以下是代码示例:

const Component = ({name}) => (<div>Hello {name}</div>)

是根据ES6还是什么？

PS:我想我可以通过这种方式在渲染函数中使用它:

<Component name={'John'} />

对吗？

Answer 1

就像 Vladu Ionut 指出的那样 -> 它看起来像一个 jsx 返回(Hello {name})所以可能它是出于 react 应用程序......

无论如何，对于你的问题:常量是 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

({名称}) => ...解构赋值 -> 一个对象作为参数传递，它只会从对象中获取名称并将其传递给函数而不是完整的对象。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

正如 Vladu Ionut 再次正确指出的那样，这不能直接在您的浏览器中使用，因为您的浏览器可能不支持它，这就是为什么您必须在使用之前对其进行转译，例如巴别塔 https://babeljs.io