属性

到目前为止，我们的 FriendlyGreeting 组件有点酷，但并不是非常有用。每次渲染 <FriendlyGreeting /> 时，我们得到完全相同的结果。它一点都不灵活！

幸运的是，组件有一个叫做 props 的东西。Props 就像函数的参数一样：它们使我们能够将数据传递给我们的组件，以便组件可以根据数据包含自定义内容。

在我在当地编码训练营教授 React 时，props 是一个常见的障碍。这个概念可能需要一段时间才能“黏住”。如果你因为不能立刻理解而感到泄气，请知道这种感觉是正常的，你可以随时在我们的社区 Discord 里提问！

好的，那么假设我们想要微调我们的问候方式，以包括一个人的名字，这样我们就可以问候他们！

在视频中，我们使用解构赋值从函数参数中提取属性。如果你以前没有见过这种语法，它看起来很新奇。你可以在 JavaScript Primer 参考模块中的对象解构 👀 课程里了解到更多。

这是视频中的沙盒：

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

function FriendlyGreeting({ name }) {
  return (
    <p
      style={{
        fontSize: '1.25rem',
        textAlign: 'center',
        color: 'sienna',
      }}
    >
      Greetings, {name}!
    </p>
  );
}

// The video was filmed using React 17, but this code
// has been updated for React 19:
const root = createRoot(document.querySelector('#root'));

root.render(
  <div>
    <FriendlyGreeting name="Josh" />
    <FriendlyGreeting name="Anita" />
    <FriendlyGreeting name="Rahul" />
  </div>
);

默认值

假设我们正在处理我们的 FriendlyGreeting 组件。我们想要向用户问候，但有一个问题：我们不知道每个人的名字。

我在构建一个生成通讯稿问题的工具时遇到了这个确切的问题。我不知道每个订阅者的名字。如果我不知道他们的名字，我想要呈现“备用”值：

// If I know their name:
Hey Josh!

// If not:
Hey there!

我们可以在 React 中使用 || 操作符来完成这个操作，就像这样：

function FriendlyGreeting({ name }) {
  return <p>Hey {name || "there"}!</p>;
}

如果提供了 name ，将使用它。否则，我们将回退并使用“there”。

这种方法有效，但在 React 中有一种更好的方式来做这个。我们可以为每个属性指定默认值。

function FriendlyGreeting({ name = "there" }) {
  return <p>Hey {name}</p>;
}

这种方法有几个好处：

• 如果我们有多个具有默认值的 props，则可以在同一位置看到所有默认值，而不是使它们散落在组件周围
• 默认值为“locked in”。我们不必记得在引用 name 属性的所有地方添加后备检查。
• || 运算符有时会令我们惊讶地使用默认值，即使我们已经提供了一个值！当提供的值是假值时，这种情况可能会发生 👀。

因此，在 prop 对象中指定默认值已成为一项根深蒂固的惯例。

这是另一个例子。我们有一个装饰性的“HorizontalRule”组件，基本上是用来在部分之间画一条线。它的默认宽度是 100px，但我们可以覆盖这个值：

function HorizontalRule({ size = '100px' }) {
  return (
    <div style={{ width: size }}>
      {/* Line-drawing stuff here */}
    </div>
  );
}
 
<HorizontalRule size="250px" /> // Will be "250px"
<HorizontalRule />              // Will be "100px"

function FriendlyGreeting({ name }) {
  return <p>Hey {name ?? "there"}!</p>;
}