jsx里嵌套jsx
JSX简介 (Introduction to JSX)
JSX is a technology that was introduced by React.
JSX是React引入的一项技术。
Although React can work completely fine without using JSX, it’s an ideal technology to work with components, so React benefits a lot from JSX.
尽管React无需使用JSX即可完全正常工作，但这是与组件一起使用的理想技术，因此React从JSX中受益匪浅。
At first, you might think that using JSX is like mixing HTML and JavaScript (and as you’ll see CSS).
起初，您可能会认为使用JSX就像将HTML和JavaScript混合在一起(并且您将看到CSS)。
But this is not true, because what you are really doing when using JSX syntax is writing a declarative syntax of what a component UI should be.
但这是不正确的，因为使用JSX语法时，您实际上正在写有关组件UI应该是什么的声明性语法。
And you’re describing that UI not using strings, but instead using JavaScript, which allows you to do many nice things.
而且您正在描述的UI不是使用字符串，而是使用JavaScript，这使您可以做很多事情。
JSX入门 (A JSX primer)
Here is how you define a h1 tag containing a string:
这是定义包含字符串的h1标签的方法：
const element = <h1>Hello, world!</h1>
It looks like a strange mix of JavaScript and HTML, but in reality it’s all JavaScript.
它看起来像JavaScript和HTML的奇怪组合，但实际上，它们全都是JavaScript。
What looks like HTML, is actually syntactic sugar for defining components and their positioning inside the markup.
看起来像HTML的实际上是用于定义组件及其在标记内的位置的语法糖。
Inside a JSX expression, attributes can be inserted very easily:
在JSX表达式中，可以很容易地插入属性：
const myId = 'test'
const element = <h1 id={myId}>Hello, world!</h1>
You just need to pay attention when an attribute has a dash (-) which is converted to camelCase syntax instead, and these 2 special cases:
您只需要注意当属性的破折号( - )转换为camelCase语法时，以及以下2种特殊情况：
class becomes className
class成为className
for becomes htmlFor
for htmlFor
because they are reserved words in JavaScript.
因为它们是JavaScript中的保留字。
Here’s a JSX snippet that wraps two components into a div tag:
这是一个JSX片段，将两个组件包装到div标签中：
<div>
<BlogPostsList />
<Sidebar />
</div>
A tag always needs to be closed, because this is more XML than HTML (if you remember the XHTML days, this will be familiar, but since then the HTML5 loose syntax won). In this case a self-closing tag is used.
始终需要关闭标签，因为它比XML更多的XML(如果您还记得XHTML的日子，这会很熟悉，但是从那时起，HTML5宽松的语法就赢了)。 在这种情况下，使用自动关闭标签。
Notice how I wrapped the 2 components into a div. Why? Because the render() function can only return a single node, so in case you want to return 2 siblings, just add a parent. It can be any tag, not just div.
请注意，我是如何将2个组件包装到div 。 为什么？ 因为render()函数只能返回一个节点 ，所以如果要返回2个同级，只需添加一个父对象。 它可以是任何标签，而不仅仅是div 。
转译JSX (Transpiling JSX)
A browser cannot execute JavaScript files containing JSX code. They must be first transformed to regular JS.
浏览器无法执行包含JSX代码JavaScript文件。 必须首先将它们转换为常规JS。
How? By doing a process called transpiling.
怎么样？ 通过执行称为转堆的过程。
We already said that JSX is optional, because to every JSX line, a corresponding plain JavaScript alternative is available, and that’s what JSX is transpiled to.
我们已经说过JSX是可选的，因为对于每条JSX行，都可以使用相应的普通JavaScript替代品，这就是JSX被移植到的内容。
For example the following two constructs are equivalent:
例如，以下两个构造是等效的：
Plain JS
普通JS
ReactDOM.render(
React.createElement('div', { id: 'test' },
React.createElement('h1', null, 'A title'),
React.createElement('p', null, 'A paragraph')
),
document.getElementById('myapp')
)
JSX
JSX
ReactDOM.render(
<div id="test">
<h1>A title</h1>
<p>A paragraph</p>
</div>,
document.getElementById('myapp')
)
This very basic example is just the starting point, but you can already see how more complicated the plain JS syntax is compared to using JSX.
这个非常基本的示例只是起点，但是您已经可以看到，与使用JSX相比，普通的JS语法要复杂得多。
At the time of writing the most popular way to perform the transpilation is to use Babel, which is the default option when running create-react-app, so if you use it you don’t have to worry, everything happens under the hood for you.
在编写执行transpilation最流行的方式的时候是用巴贝尔 ，运行时是默认选项， create-react-app ，所以如果你使用它，你不必担心，一切引擎盖下发生您。
If you don’t use create-react-app you need to setup Babel yourself.
如果您不使用create-react-app ，则需要自己设置Babel。
JSX中的JS (JS in JSX)
JSX accepts any kind of JavaScript mixed into it.
JSX接受任何类型JavaScript混合。
Whenever you need to add some JS, just put it inside curly braces {}. For example here’s how to use a constant value defined elsewhere:
每当您需要添加一些JS时，只需将其放在花括号{} 。 例如，以下是使用在其他地方定义的常量值的方法：
const paragraph = 'A paragraph'
ReactDOM.render(
<div id="test">
<h1>A title</h1>
<p>{paragraph}</p>
</div>,
document.getElementById('myapp')
)
This is a basic example. Curly braces accept any JS code:
这是一个基本的例子。 花括号接受任何 JS代码：
const paragraph = 'A paragraph'
ReactDOM.render(
<table>
{rows.map((row, i) => {
return <tr>{row.text}</tr>
})}
</table>,
document.getElementById('myapp')
)
As you can see we nested JavaScript inside JSX defined inside JavaScript nested in JSX. You can go as deep as you need.
如您所见， 我们将JavaScript嵌套在JSX中，将其嵌套在JSX中 。 您可以根据需要进行深入研究。
JSX中HTML (HTML in JSX)
JSX resembles HTML a lot, but it’s actually XML syntax.
JSX非常类似于HTML，但实际上是XML语法。
In the end you render HTML, so you need to know a few differences between how you would define some things in HTML, and how you define them in JSX.
最后，您呈现HTML，因此您需要了解如何在HTML中定义某些内容与如何在JSX中定义它们之间的一些区别。
Just like in XHTML, if you have ever used it, you need to close all tags: no more <br> but instead use the self-closing tag: <br /> (the same goes for other tags)
就像在XHTML中一样，如果您曾经使用过它，则需要关闭所有标签：不再使用<br> ，而是使用自动关闭标签： <br /> (其他标签也是如此)
camelCase是新标准 (camelCase is the new standard)
In HTML you’ll find attributes without any case (e.g. onchange). In JSX, they are renamed to their camelCase equivalent:
在HTML中，您会发现没有任何大小写的属性(例如onchange )。 在JSX中，它们被重命名为其等效的camelCase：
onchange => onChange
onchange => onChange
onclick => onClick
onclick => onClick
onsubmit => onSubmit
onsubmit => onSubmit
class成为className (class becomes className)
Due to the fact that JSX is JavaScript, and class is a reserved word, you can’t write
由于JSX是JavaScript，而class是保留字，因此您不能编写
but you need to use
但是你需要使用
<p className="description">
The same applies to for which is translated to htmlFor.
for翻译为htmlFor也是htmlFor 。
样式属性更改其语义 (The style attribute changes its semantics)
The style attribute in HTML allows to specify inline style. In JSX it no longer accepts a string, and in CSS in React you’ll see why it’s a very convenient change.
HTML中的style属性允许指定内联样式。 在JSX中，它不再接受字符串， 在React中的CSS中，您将看到为什么这是一个非常方便的更改。
Form fields definition and events are changed in JSX to provide more consistency and utility.
表单字段定义和事件在JSX中进行了更改，以提供更多的一致性和实用性。
Forms in JSX goes into more details on forms.
JSX中的表单会详细介绍表单。
React中CSS (CSS in React)
JSX provides a cool way to define CSS.
JSX提供了一种定义CSS的好方法。
If you have a little experience with HTML inline styles, at first glance you’ll find yourself pushed back 10 or 15 years, to a world where inline CSS was completely normal (nowadays it’s demonized and usually just a “quick fix” go-to solution).
如果您对HTML内联样式有一点经验，乍一看就会发现自己落后了10或15年，进入了内联CSS完全正常的世界(如今已经被妖魔化了，通常只是“快速修复”)解)。
JSX style is not the same thing: first of all, instead of accepting a string containing CSS properties, the JSX style attribute only accepts an object. This means you define properties in an object:
JSX样式不是一回事：首先，JSX style属性不接受包含CSS属性的字符串，而是仅接受一个对象。 这意味着您在对象中定义属性：
var divStyle = {
color: 'white'
}
ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode)
or
要么
ReactDOM.render(<div style={{ color: 'white' }}>Hello World!</div>, mountNode)
The CSS values you write in JSX are slightly different from plain CSS:
您在JSX中编写CSS值与普通CSS略有不同：
- the keys property names are camelCased 键属性名称为camelCased
- values are just strings 值只是字符串
- you separate each tuple with a comma 您用逗号分隔每个元组
为什么相对于普通CSS / SASS / LESS，这是首选？ (Why is this preferred over plain CSS / SASS / LESS?)
CSS is an unsolved problem. Since its inception, dozens of tools around it rose and then fell. The main problem with CSS is that there is no scoping and it’s easy to write CSS that is not enforced in any way, thus a “quick fix” can impact elements that should not be touched.
CSS是一个尚未解决的问题 。 自成立以来，围绕它的数十种工具先升后降。 CSS的主要问题是没有作用域，并且很容易编写不以任何方式强制执行CSS，因此“快速修复”会影响不应被触摸的元素。
JSX allows components (defined in React for example) to completely encapsulate their style.
JSX允许组件(例如在React中定义)完全封装其样式。
这是首选解决方案吗？ (Is this the go-to solution?)
Inline styles in JSX are good until you need to
JSX中的内联样式很好，直到您需要
- write media queries 撰写媒体查询
- style animations 样式动画
reference pseudo classes (e.g. :hover)
参考伪类(例如:hover )
reference pseudo elements (e.g. ::first-letter)
参考伪元素(例如::first-letter )
In short, they cover the basics, but it’s not the final solution.
简而言之，它们涵盖了基础知识，但这不是最终的解决方案。
JSX adds some changes to how HTML forms work, with the goal of making things easier for the developer.
JSX对HTML表单的工作方式进行了一些更改，目的是使开发人员更轻松。
value和defaultValue (value and defaultValue)
The value attribute always holds the current value of the field.
value属性始终保存字段的当前值。
The defaultValue attribute holds the default value that was set when the field was created.
defaultValue属性保存创建字段时设置的默认值。
This helps solve some weird behavior of regular DOM interaction when inspecting input.value and input.getAttribute('value') returning one the current value and one the original default value.
当检查input.value和input.getAttribute('value')返回一个当前值和一个原始默认值时，这有助于解决常规DOM交互的一些奇怪行为。
This also applies to the textarea field, e.g.
这也适用于textarea字段，例如
<textarea>Some text</textarea>
but instead
但反而
<textarea defaultValue={'Some text'} />
For select fields, instead of using
对于select字段，而不是使用
<select>
<option value="x" selected>
...
</option>
</select>
use
用
<select defaultValue="x">
<option value="x">...</option>
</select>
更一致的onChange (A more consistent onChange)
Passing a function to the onChange attribute you can subscribe to events on form fields.
将函数传递给onChange属性，您可以订阅表单字段上的事件。
It works consistently across fields, even radio, select and checkbox input fields fire a onChange event.
它可以跨字段一致地工作，即使radio ， select和checkbox输入字段也会触发onChange事件。
onChange also fires when typing a character into an input or textarea field.
onChange键入一个字符到一个时也触发input或textarea字段。
JSX自动转义 (JSX auto escapes)
To mitigate the ever present risk of XSS exploits, JSX forces automatic escaping in expressions.
为了减轻XSS漏洞利用的风险，JSX强制表达式自动转义。
This means that you might run into issues when using an HTML entity in a string expression.
这意味着在字符串表达式中使用HTML实体时，您可能会遇到问题。
You expect the following to print © 2020:
您希望以下内容可以打印© 2020 ：
But it’s not, it’s printing © 2020 because the string is escaped.
但这不是，它是打印© 2020 © 2020因为该字符串已转义。
To fix this you can either move the entities outside the expression:
要解决此问题，您可以将实体移到表达式外：
or by using a constant that prints the Unicode representation corresponding to the HTML entity you need to print:
或者使用一个常量来打印与您需要打印HTML实体相对应的Unicode表示形式：
JSX中的空白 (White space in JSX)
To add white space in JSX there are 2 rules:
要在JSX中添加空格，有2条规则：
水平空白被修剪为1 (Horizontal white space is trimmed to 1)
If you have white space between elements in the same line, it’s all trimmed to 1 white space.
如果同一行中的元素之间有空格，则所有空格都将修剪为1个空格。
<p>Something becomes this</p>
becomes
变成
<p>Something becomes this</p>
消除了垂直空白 (Vertical white space is eliminated)
<p>
Something
becomes
this
</p>
becomes
变成
<p>Somethingbecomesthis</p>
To fix this problem you need to explicitly add white space, by adding a space expression like this:
要解决此问题，您需要通过添加如下所示的空格表达式来显式添加空格：
<p>
Something
{' '}becomes
{' '}this
</p>
or by embedding the string in a space expression:
或通过将字符串嵌入空格表达式中：
<p>
Something
{' becomes '}
this
</p>
You can add comments to JSX by using the normal JavaScript comments inside an expression:
您可以使用表达式中的普通JavaScript注释向JSX添加注释：
<p>
{/* a comment */}
{
//another comment
}
</p>
传播属性 (Spread attributes)
In JSX a common operation is assigning values to attributes.
在JSX中，常见的操作是为属性分配值。
Instead of doing it manually, e.g.
而不是手动执行，例如
<div>
<BlogPost title={data.title} date={data.date} />
</div>
you can pass
你可以通过
<div>
<BlogPost {...data} />
</div>
and the properties of the data object will be used as attributes automatically, thanks to the ES6 spread operator.
借助ES6 扩展运算符 ， data对象的属性将自动用作属性。
如何在JSX中循环 (How to loop in JSX)
If you have a set of elements you need to loop upon to generate a JSX partial, you can create a loop, and then add JSX to an array:
如果有一组元素需要循环以生成JSX部分，则可以创建一个循环，然后将JSX添加到数组中：
const elements = [] //..some array
const items = []
for (const [index, value] of elements.entries()) {
items.push(<Element key={index} />)
}
Now when rendering the JSX you can embed the items array by wrapping it in curly braces:
现在，当渲染JSX时，您可以通过将其包装在花括号中来嵌入items数组：
const elements = ['one', 'two', 'three'];
const items = []
for (const [index, value] of elements.entries()) {
items.push(<li key={index}>{value}</li>)
}
return (
<div>
{items}
</div>
)
You can do the same directly in the JSX, using map instead of a for-of loop:
您可以使用map而不是for-of循环直接在JSX中执行相同的操作：
const elements = ['one', 'two', 'three'];
return (
<ul>
{elements.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
翻译自: https://flaviocopes.com/jsx/
jsx里嵌套jsx
