标签：title JavaScript JS 反应 props 组件 JSX

与 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。