表达式插槽
表达式插槽
有关语句和表达式之间差异的更多信息,请查看 JavaScript Primer 模块中的“语句与表达式”课程 👀。
这是上面视频中的沙箱:
JSX 中的注释
在 JSX 中添加注释,我们使用表达式插槽:
我们需要使用多行注释语法 ( /* */ ) 而不是单行语法 ( // )。这是因为单行语法会把所有内容注释掉,包括表达式占位符的闭合 } !
属性表达式槽
我们可以使用相同的技巧处理动态属性值!
这里有一个例子:
如上所示,花括号( )允许我们创建一个表达式插槽。这次,我们为 id 属性的值创建一个插槽。
编译过程如下:
相比之下,当 id 的值固定时,没有表达式槽的情况如下所示:
我们可以在需要数值动态变化时使用属性表达式插槽。我们可以在这里放置任何有效的 JavaScript 表达式,不仅仅是变量:
请注意,当我们编译代码时,实际上并不会进行评估。我们编写了一些逻辑,将该 userEmail 字符串转换为 "sumeet-thegreat.com" ,用 - 替换 @ 字符,但这只会在我们运行代码时发生。
当 JSX 被编译为 JS 时,我们将复制 { 和 } 之间的所有内容。我们不调用任何函数或运行任何逻辑。这发生在处理过的 JavaScript 在浏览器中运行时。
这是编译时(在代码在浏览器中运行之前发生的代码处理)和运行时(在浏览器中发生的代码执行)之间的区别。
类型强制转换
在运行时,React 将在表达式插槽中提供属性时根据需要自动转换类型。
例如,这两个元素是相同的:
同样,我们可以传递数字或字符串作为数值属性:
布尔属性
在 HTML 中,可以仅通过指定键来将属性设置为 true ,就像这样
这种相同的模式已在 JSX 中实现;这两个元素是等价的:
老实说,我不推荐这样做。我更喜欢直接表达,写 required={true}
。