Props：向组件传递数据

学习如何通过 props 向组件传递数据，让你的组件变得可复用。

7 分钟 · 3 题

一个总是显示同样内容的组件用处不大。Props（“properties” 属性的简称）是你传递给组件的数据，就像函数的参数一样。想象一张请柬：模板对所有人都相同，只有宾客的名字会变。组件就是那个模板，prop 就是那个名字。

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

在 App 里，你像写 HTML 属性一样写 name="Lea"：React 会把所有这些值汇集成一个对象，组件以 props 这个名字接收它。然后你就在花括号里读取 props.name。在实践中，人们常常直接在函数的括号里解构 props：function Greeting({ name })。还有很重要的一点：文本放在引号之间，但其他一切（数字、布尔值、数组）都放在花括号之间。

function ProfileCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} years old</p>
    </div>
  );
}

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

这正是 props 的全部威力所在：社交网络不会为每一条帖子写一个组件，而是只写一个 Post 组件，然后传给它上百万次不同的 props。你只写一次模板，却能到处使用它。

知识检测

确认你已牢记本课的重点内容。

1. Props 有什么用？
   • 把数据从父组件传递给子组件
   • 存储随时间变化的数据
   • 为组件应用 CSS 样式
2. 如何把数字 25 传递给一个 Profile 组件？
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. 组件可以修改它接收到的 props 吗？
   • 可以，只要是在 return 里面做就行
   • 可以，但只能修改字符串
   • 不可以，props 是只读的