Props

假设你在构建一个 Greeting 组件，用来显示欢迎横幅，每个登录的访客都需要看到自己的名字，而不是一个对所有人都硬编码的名字。一个只能渲染单个固定值的组件无法单独做到这一点。Props（properties 的缩写）是你从外部将数据传入组件的方式，就像函数参数把值传入函数一样。你在组件上写 props 的方式和在 HTML 标签上写属性的方式一样，而组件通过单个参数读取这些 props。

jsx

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>
}
// 用法：<Greeting name="Ada" />

Greeting 接收一个 prop，叫做 name。React 把你写在 <Greeting> 上的所有属性收集到一个对象里，然后把这个对象作为组件的第一个参数传进去，所以这里的 { name } 是在解构这个对象，直接取出 name 值。调用 <Greeting name="Ada" /> 时，函数内部的 name 就是 "Ada"。用不同的名字再调用一次，你会从同一个组件得到不同的标题。

Props 只能单向流动：从使用组件的地方流向组件内部。在 Greeting 内部，name 的行为像一个普通变量，但是组件不能改变它：props 是只读的。如果组件需要随时间变化的数据，那是 state 的工作，我们会在后面的章节里讲到。

默认值

如果某个 prop 可能缺失，可以像给任何函数参数设置默认值一样给它设置默认值：在解构模式中使用 =。

jsx

function Greeting({ name = 'friend' }) {
  return <h1>Hello, {name}</h1>
}

调用 <Greeting /> 而不传 name prop 时，name 会回退到 'friend'。如果传了 name，就会覆盖默认值。这是普通的 JavaScript 默认参数语法，应用在 React 传给组件的对象上。

children prop

有些组件需要包装其他内容，而不是通过属性接收它。把内容写在组件的开标签和闭标签之间，React 会自动把它作为一个名叫 children 的特殊 prop 传进来。

jsx

function Card({ children }) {
  return <div className="card">{children}</div>
}

// 用法：
// <Card>
//   <p>写在这里的任何内容都会成为 Card 的 children prop。</p>
// </Card>

children 的工作方式和任何其他 prop 完全一样：你通过同样的解构参数读取它，组件决定在哪里渲染它。唯一的区别是它是如何传进来的，通过标签内容而不是命名属性。

传递任何 JavaScript 值

一个 prop 可以保存任何 JavaScript 值：数字、布尔值、对象、数组，甚至函数。用花括号而不是引号包裹这个值。

jsx

function UserCard({ user, onSelect }) {
  return <button onClick={() => onSelect(user.id)}>{user.name}</button>
}

// 用法：<UserCard user={{ id: 1, name: '李明' }} onSelect={handleSelect} />

这里 user 是一个对象，onSelect 是一个函数，被传下来让组件可以调用它。当有人点击按钮时，onClick 会运行 onSelect，这是一个事件处理程序，Events 章节接下来会详细讲解；现在就信任它吧。这就是组件如何通信的：数据通过 props 流向下层，行为也以同样的方式流动，作为子组件可以调用的函数。

Props 是把数据从外部传入组件的方式。再后面的几章，state 讲的是组件如何随时间保存和更新自己的数据。

JunoProps 是只读的 Props 是一个组件从使用它的地方接收信息的方式，就像参数给函数传值一样。你从解构参数读取它们，比如 { name }，组件永远不会改变它接收到的 props。当某个 prop 可能缺失时，用 = 给它设置一个默认值，记住放在组件标签之间的任何内容都会作为它的 children prop 传进来。

接下来：Lists and keys，一个组件渲染整个数据数组的情况。

Props ​

默认值 ​

children prop ​

传递任何 JavaScript 值 ​

单向数据流 ​

Props

默认值

children prop

传递任何 JavaScript 值

单向数据流