My App

属性

属性

到目前为止,我们的 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>;
}

如果您还没有看到这个奇特的家伙,它与 || 非常相似,但它只能保护免遭空值( null 和 undefined )的情况。这意味着我们不必担心像 0 这样的“令人惊讶”的假值。

最终,我更喜欢在 React props 中使用“默认值”的方法。我喜欢能够将所有的后备值集中在一个地方,并确保在引用 prop 时始终使用相同的后备值。

您可以在我的 JavaScript 运算符查询工具上了解有关此运算符的更多信息。

“defaultProps” 属性

在旧版本的 React 中,我们有一个可以应用于组件的显式 defaultProps 属性。令人沮丧的是,如果你在谷歌上搜索“React 默认属性”,你会发现过时的资源在教授这种过时的方法。

请放心,您不再需要使用 defaultProps 了!推荐的方法是使用本课中展示的解构赋值。

On this page