章节6

使用 Props 显示数据

到目前为止，如果您要重用 <Header /> 组件，它将两次显示相同的内容。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

但是，如果您想传递不同的文本，或者由于您是从外部来源获取数据而事先不知道信息，该怎么办？

常规 HTML 元素具有可用于传递更改这些元素行为的信息片段的属性。例如，更改 <img> 元素的 src 属性会更改显示的图像。更改 <a> 标记的 href 属性会更改链接的目标。

同样，您可以将信息片段作为属性传递给 React 组件。这些称为 props。例如，按钮的可能变化

Diagram showing 3 variations of a button component: Primary, Secondary, and Disabled

类似于 JavaScript 函数，您可以设计接受自定义参数（或 props）的组件，这些参数会更改组件的行为或在渲染到屏幕上时可见显示的内容。然后，您可以将这些 props 从父组件传递到子组件。

注意：在 React 中，数据沿着组件树向下流动。这称为单向数据流。将在下一章讨论的状态可以作为 props 从父组件传递到子组件。

使用 props

在您的 HomePage 组件中，您可以将自定义 title prop 传递给 Header 组件，就像传递 HTML 属性一样

index.html

function HomePage() {
  return (
    <div>
      <Header title="React" />
    </div>
  );
}

而 Header（子组件）可以将其第一个函数参数作为其 props 接受。

index.html

function Header(props) {
  return <h1>Develop. Preview. Ship.</h1>;
}

如果您 console.log() props，您可以看到它是一个具有 title 属性的对象。

index.html

function Header(props) {
  console.log(props); // { title: "React" }
  return <h1>Develop. Preview. Ship.</h1>;
}

由于 props 是一个对象，因此您可以使用对象解构在您的函数参数内部显式命名 props 的值

index.html

function Header({ title }) {
  console.log(title); // "React"
  return <h1>Develop. Preview. Ship.</h1>;
}

然后，您可以将 <h1> 标记的内容替换为您的 title 变量。

index.html

function Header({ title }) {
  console.log(title);
  return <h1>title</h1>;
}

如果您在浏览器中打开您的文件，您将看到它正在显示实际的单词“title”。这是因为 React 认为您打算将纯文本字符串渲染到 DOM。

您需要一种方法来告诉 React 这是一个 JavaScript 变量。

在 JSX 中使用变量

要使用 title prop，请添加花括号 {}。这些是 JSX 语法，允许您在 JSX 标记内直接编写常规 JavaScript。

index.html

function Header({ title }) {
  console.log(title);
  return <h1>{title}</h1>;
}

您可以将花括号视为在“JSX 世界”中进入“JavaScript 世界”的一种方式。您可以在花括号内添加任何JavaScript 表达式（计算结果为单个值）例如

使用点表示法的对象属性

example.js

function Header(props) {
  return <h1>{props.title}</h1>;
}

模板字面量

example.js

function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}

函数的返回值

example.js

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}
 
function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

或三元运算符

example.js

function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

您现在可以将任何字符串传递给您的 title prop，或者，如果您使用三元运算符，您甚至可以根本不传递 title prop，因为您已在组件中考虑了默认情况

example.js

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

您的组件现在接受一个通用的 title prop，您可以在应用程序的不同部分重用它。您只需更改 title 字符串即可

index.html

function HomePage() {
  return (
    <div>
      <Header title="React" />
      <Header title="A new title" />
    </div>
  );
}

遍历列表

通常需要将数据显示为列表。您可以使用数组方法来操作数据并生成在样式上相同但包含不同信息片段的 UI 元素。

将以下名称数组添加到您的 HomePage 组件中

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

然后，您可以使用 array.map() 方法遍历数组并使用箭头函数将名称映射到列表项

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

请注意，您如何使用花括号在“JavaScript”和“JSX”世界之间穿梭。

如果您运行此代码，React 将向我们发出有关缺少 key prop 的警告。这是因为 React 需要一些东西来唯一标识数组中的项目，以便它知道在 DOM 中更新哪些元素。

您现在可以使用名称，因为它们当前是唯一的，但建议使用保证唯一的东西，例如项目 ID。

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

其他资源

将 props 传递给组件

渲染列表

条件渲染

使用 Props 显示数据

使用 props

在 JSX 中使用变量

遍历列表

您已完成章节6