表达式插槽

有关语句和表达式之间差异的更多信息，请查看 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>;

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

属性表达式槽

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

这里有一个例子：

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} />

<input required>

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