My App

表达式插槽

表达式插槽

有关语句和表达式之间差异的更多信息,请查看 JavaScript Primer 模块中的“语句与表达式”课程 👀。

这是上面视频中的沙箱:

import React from 'react';
import { createRoot } from 'react-dom/client';

const shoppingList = ['apple', 'banana', 'carrot'];

// This code...
const element = (
  <div>
    Items left to purchase: {shoppingList.length}
  </div>
);

// ...is equivalent to this code:
const compiledElement = React.createElement(
  'div',
  { id: 'shopping' },
  'Items left to purchase: ',
  shoppingList.length
);

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);

JSX 中的注释

在 JSX 中添加注释,我们使用表达式插槽:

const element = <div>{/* Some comment! */}</div>;

我们需要使用多行注释语法 ( /* */ ) 而不是单行语法 ( // )。这是因为单行语法会把所有内容注释掉,包括表达式占位符的闭合 } !

jsx broken comment

属性表达式槽

我们可以使用相同的技巧处理动态属性值!

这里有一个例子:

const uniqueId = "content-wrapper";
 
const element = <main id={uniqueId}>Hello World</main>;

如上所示,花括号( )允许我们创建一个表达式插槽。这次,我们为 id 属性的值创建一个插槽。

编译过程如下:

const element = React.createElement(
  "main",
  {
    id: uniqueId,
  },
  "Hello World",
);

相比之下,当 id 的值固定时,没有表达式槽的情况如下所示:

const element = (
  <main id="content-wrapper">Hello World</main>
);
 
const compiledElement = React.createElement(
  "main",
  {
    id: "content-wrapper",
  },
  "Hello World",
);

我们可以在需要数值动态变化时使用属性表达式插槽。我们可以在这里放置任何有效的 JavaScript 表达式,不仅仅是变量:

const userEmail = "sumeet@thegreat.com";
 
const element = (
  <main id={userEmail.replace("@", "-")}>Hello World</main>
);
 
// Will get compiled as:
const compiledElement = React.createElement(
  "main",
  {
    id: userEmail.replace("@", "-"),
  },
  "Hello World",
);

请注意,当我们编译代码时,实际上并不会进行评估。我们编写了一些逻辑,将该 userEmail 字符串转换为 "sumeet-thegreat.com" ,用 - 替换 @ 字符,但这只会在我们运行代码时发生。

当 JSX 被编译为 JS 时,我们将复制 { 和 } 之间的所有内容。我们不调用任何函数或运行任何逻辑。这发生在处理过的 JavaScript 在浏览器中运行时。

这是编译时(在代码在浏览器中运行之前发生的代码处理)和运行时(在浏览器中发生的代码执行)之间的区别。

类型强制转换

在运行时,React 将在表达式插槽中提供属性时根据需要自动转换类型。

例如,这两个元素是相同的:

// This works:
<input required="true" />
 
// And so does this!
<input required={true} />

同样,我们可以传递数字或字符串作为数值属性:

// ✅ Valid
<input type="range" min="1" max="20" />
// ✅ Valid
<input type="range" min={1} max={20} />

布尔属性

在 HTML 中,可以仅通过指定键来将属性设置为 true ,就像这样

<input required>

这种相同的模式已在 JSX 中实现;这两个元素是等价的:

<input required />
<input required={true} />

老实说,我不推荐这样做。我更喜欢直接表达,写 required={true}

On this page