反应第 1 部分 JSX

反应第 1 部分 JSX

Photo by 罗曼辛克维奇 on 不飞溅

1.什么是JSX？

让我们从一段非常基本的代码开始：

函数应用程序（）{返回

你好呀！

这里

你好呀！

被视为 JSX 并已从函数 App 返回。

因此，简单来说 JSX 是我们在组件中写出来的，用来告诉 React 我们想在屏幕上显示什么。

根据 React 文档， JSX 只是为 React.createElement() 函数提供了一个语法糖。

*注意：JSX 实际上并没有在浏览器内部执行，因为它不是有效的 Javascript，并且浏览器不知道 JSX 实际上是什么。

2.如何使用JSX展示基本内容

<h1>你好呀！</h1>

在 App 函数中写入对浏览器没有任何意义，因此浏览器中不会自动显示任何内容。而是为 React 创建一个指令，测试它以创建一个元素。我们必须从组件中返回它，以便 React 实际使用它。

要使用 JSX 显示内容，我们使用 {}

3. 在 JSX 中打印 Javascript 变量

让我们以前面的代码片段为例。

函数应用程序（）{返回<h1>你好呀</h1>}

在这里，我们将返回值硬编码为 Hi there，但是 JSX 可以做得更多吗？如果我想执行一些数学计算，将其存储在 Javascript 变量中，然后将其返回到屏幕上怎么办？

使用 JSX 可以做到这一点。让我们看看如何在 JSX 中返回变量。

让我们考虑另一个代码片段

const message = '你好吗'？ '

现在，由于它存储在 message 变量中，我们可以执行计算并相应地更改值，因此要将其返回为 JSX，我们只需使用 {} 显示它。

函数应用程序（）{返回<h1>{信息}</h1> }

这将在屏幕上返回变量消息的值。

*注意：我们可以打印任何类型的任何 javascript 变量，可以是字符串、数字、数组、布尔值，但我们不能在 JSX 中打印对象

JSX 主要用于在屏幕上显示字符串和数字，因为它对数组和布尔值的行为有所不同*

4. 将 HTML 转换为 JSX

将 HTML 转换为 JSX 有一些规则。理解这一点将有助于我们更轻松、更快速地编写 JSX。

所有属性名称都遵循驼峰命名法。

HTML ：<input maxlength=’4'/>

JSX ：<input maxLength=’4' />

2.数字属性使用花括号。

<input maxLength={4} />

3. 布尔值 真的 可以只写属性名。 错误的 应该用花括号写。

- <input disabled readOnly={false}/>

4. class属性写成className

HTML ：<input class=’text’/>

JSX ：<input className=’text’ />

5. 内联样式作为对象提供。

<input style={{backgroundColor:red}} />

如果您喜欢这些内容，您可以浏览 github 存储库，我会在其中不断更新我的学习、理论和代码。如果您喜欢它，请给它一个星： https://github.com/uankit/Modern-React-With-Redux-Course

联系我 领英 合作

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37284/56091710