jsx里嵌套jsx

JSX allows us to add HTML elements in React, thus making it easier to write React components in an efficient and expressive manner. In this blog I will briefly explain what JSX is, then I will focus on explaining some of the unique syntax of JSX.

JSX允许我们在React中添加HTML元素，从而使以有效和富有表现力的方式编写React组件变得更加容易。 在此博客中，我将简要说明什么是JSX，然后将重点介绍一些JSX的独特语法。

什么是JSX？ (What is JSX?)

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that was written to be used in React applications. JSX code looks a lot like HTML but it comes with the full power of JavaScript. With JSX we can write HTML elements in JavaScript without using methods like createElement() or appendChild(). JSX converts HTML tags into React elements.

JSX代表JavaScript XML。 这是用于React应用程序JavaScript语法扩展。 JSX代码看起来很像HTML，但是它具有JavaScript的全部功能。 使用JSX，我们可以使用JavaScript编写HTML元素，而无需使用诸如createElement()或appendChild()之类的方法。 JSX将HTML标签转换为React元素。

JSX is considered as a declarative style of programming, whereas most of the JavaScript code would be considered imperative. To illustrate the difference:

JSX被视为一种声明性的编程风格，而大多数JavaScript代码将被视为必须的。 为了说明差异：

In vanilla JavaScript our code is made of 3 explicit steps. With JSX, we just need to write what we want, and allow React to figure things out behind the scenes:

在普通JavaScript中，我们的代码由3个明确的步骤组成。 使用JSX，我们只需要编写所需的内容，并允许React在幕后找出问题：

JSX代码是什么样的？ (What JSX code looks like?)

A basic unit of JSX is called a JSX element. JSX elements are treated exactly the same as JavaScript expressions, they can be passed to a function or stored as a variable. Just like HTML elements, JSX elements can have attributes and are written in an HTML - style syntax:

JSX的基本单元称为JSX元素。 JSX元素的处理方式与JavaScript表达式完全相同，可以将它们传递给函数或存储为变量。 就像HTML元素一样，JSX元素可以具有属性，并以HTML样式的语法编写：

Just like in HTML, we can nest JSX elements inside of other JSX elements. Nested JSX expressions can also be saved as variables, passed to functions etc. Multi-line JSX expressions should be wrapped in parentheses:

就像在HTML中，我们可以在其他JSX元素内部嵌套JSX元素。 嵌套的JSX表达式也可以另存为变量，传递给函数等。多行JSX表达式应放在括号中：

JSX expressions should have exactly one outermost element. If JSX expression has multiple outer elements, the expression should be wrapped in a <div></div>.

JSX表达式应该只包含一个最外面的元素。 如果JSX表达式具有多个外部元素，则该表达式应包装在<div> </ div>中。

A react component returns JSX with the render() method and every component you use needs a render() method to return JSX. Without an element that wraps the returned JSX in a component, we will get an error.

react组件使用render()方法返回JSX，并且您使用的每个组件都需要一个render()方法来返回JSX。 没有将返回的JSX包装在组件中的元素，我们将收到错误消息。

JSX allows us to write HTML in React. JSX provides a significant boost to readability this is especially true for building complex applications, where components can be children of other components. For more in depth JSX tutorial visit: https://reactjs.org/docs/jsx-in-depth.html

JSX允许我们在React中编写HTML。 JSX极大地提高了可读性，这对于构建复杂的应用程序尤其如此，因为组件可以是其他组件的子组件。 有关更深入的JSX教程，请访问： https ://reactjs.org/docs/jsx-in-depth.html

翻译自: https://medium.com/@paskomariola/a-quick-introduction-to-jsx-ce57ce1b3343

jsx里嵌套jsx