与 JSX 反应

大家好。今天我想谈谈 JSX。

Ĵ SX 是源自 JavaScript 和 XML 首字母的首字母缩写词。 JSX 的主要目的是通过在 javascript 文件中编写 HTML 代码来提供更直观的代码使用。它还允许我们以声明的形式显示文档结构中包含的元素或组件。我想稍微解开这最后一句话。在 JSX 或类似技术出现之前，当我们想要在 DOM 上创建元素、向元素添加属性或连接事件列表时，我们是以命令式的方式进行这些操作，而不是以声明的方式。总之，JSX 允许我们在 js 文件中编写声明性的 html 元素。这样我们可以创建更复杂但更容易理解的组件。我上面说的是说明 JSX 的主要目的和特性。 ** 技术上** , ** JSX 是一种合成表示，可以轻松地在 React API 中编写 React.createElement(component, props, ...children) 函数。**

JSX 提示：

嵌套组件：

它允许您将组件添加为其他组件的子组件。我们可以多次渲染另一个名为 Ingredient 的组件。例如，我们可以多次渲染另一个组件：

 <IngredientList>  
 <Ingredient />  
 <Ingredient />  
 <Ingredient />  
 </IngredientList>

班级名称：

由于 class 是 JS 中的保留字，所以使用 className 来定义 class 属性：

 <h1 className=”fancy”>烤鲑鱼</h1>

JS 表达式：

它们被包裹在花括号中，并指示应在何处评估变量并返回其结果值。

 常量应用 = () => {  
 常量数 = 10;  
 返回 （  
 <div>  
 <p>号码：{号码}</p>  
 </div>  
 );  
 };

在大括号内，我们只能编写一个计算结果为某个值的表达式。

评估：

在花括号之间添加的 JS 将被评估。这意味着会发生连接或加法等操作。这也意味着在 JS 表达式中找到的函数将被调用：

`**

{'你好' + this.props.title}

{this.props.title.toLowerCase().replace}

** **函数追加标题（{this.props.title}）{ console.log('${this.props.title} 很棒！') }**`

将数组映射到 JSX：

JSX 是 JavaScript，因此您可以将 JSX 直接合并到 JavaScript 函数中。例如，您可以将数组映射到 JSX 元素

 <ul>{this.props.ingredients.map((ingredient, i) =>  
 <li key={i}>{成分}</li>  
 )}  
 </ul>

JSX 看起来干净易读，但不能用浏览器解释。所有 JSX 都必须转换为 createElement 调用或工厂。幸运的是，有一个很好的工具： 通天塔。

下一篇关于 Babel 的文章见

标签：title,JavaScript,JS,反应,props,组件,JSX
来源： https://www.cnblogs.com/amboke/p/16645202.html