JSX代表什么? [英] What does JSX stand for?

问题描述

JSX代表什么?

我指的是JSX，它被定义为ECMAScript的类似于XML的语法扩展，随着ReactJS的日益流行，它已经变得非常流行.

I am referring to the JSX that is defined as a XML-like syntax extension to ECMAScript, which has become quite popular with the increasing popularity of ReactJS.

推荐答案

JSX代表 J ava S cript X ML.使用React，它是元素和组件的类似XML的代码的扩展.根据React文档，正如您提到的:

JSX stands for JavaScript XML. With React, it's an extension for XML-like code for elements and components. Per the React docs and as you mentioned:

JSX是ECMAScript的类似XML的语法扩展，没有任何定义的语义

JSX is a XML-like syntax extension to ECMAScript without any defined semantics

从上面的引文中，您可以看到JSX没有定义语义，它只是JavaScript的扩展，允许编写类似XML的代码以简化和美观，然后将JSX转换为纯JavaScript函数调用与 React.createElement .根据React教程:

From the quote above, you can see that JSX doesn't have defined semantics, it's just an extension to JavaScript that allows to write XML-like code for simplicity and elegance, and then you transpile the JSX into pure JavaScript function calls with React.createElement. Per the React tutorial:

JSX是将XML语法添加到JavaScript的预处理步骤.您当然可以在没有JSX的情况下使用React，但是JSX使React更加优雅.

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.

就像XML一样，JSX标记也具有标记名称，属性和子代.如果属性值用引号引起来，则该值为字符串.否则，将值括在大括号中，并且该值是随附的JavaScript表达式.

Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

JSX中的任何代码都将转换为纯JavaScript/ECMAScript.考虑一个名为 Login 的组件.现在我们用JSX渲染它:

Any code in JSX is transformed into plain JavaScript/ECMAScript. Consider a component called Login. Now we render it like so with JSX:

<Login foo={...} bar={...} />

如您所见，JSX只允许您使用类似于XML的标记语法，以表示React中的组件和元素.它被转换为纯JavaScript:

As you can see, JSX just allows you to have XML-like syntax for tags, representing components and elements in React. It's transpiled into pure JavaScript:

React.createElement(Login, { foo: ..., bar: ... });

您可以在文档中阅读更多的 .

You can read more at the docs.

这篇关于JSX代表什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！