props：父组件交给子组件的包裹

一句话理解

props 是父组件交给子组件的输入。像外卖单上的“桌号、菜名、备注”：后厨根据收到的单子工作，但不能偷偷改顾客原本写的内容。

什么场景使用

当一个组件需要显示外面提供的数据，或者需要通知外面“用户点了按钮”，就会用 props。

具体场景：

• MessageCard 需要知道这条留言的内容和作者。
• DeleteButton 需要知道要删除哪条留言。
• 子组件点击后，需要让父组件更新整张列表。

具体例子：把留言传给卡片

父组件：

<MessageCard text="今天学会了 Network" author="小月" />

子组件：

function MessageCard({ text, author }) {
  return <article>{author}：{text}</article>
}

按人话读：父组件把两个贴着标签的包裹交出去，标签叫 text 和 author。子组件打开包裹，把值放到页面里。

{ text, author }   从 props 里取出这两个名字对应的值
{author}           在 JSX 里插入 author 的实际内容
：                 普通文字
{text}             在 JSX 里插入 text 的实际内容

把动作也传下去

子组件不能直接改父组件的留言列表，但父组件可以把一个“通知电话”交给它：

function App() {
  function deleteMessage(id) {
    console.log('准备删除', id)
  }

  return <MessageCard id="m101" onDelete={deleteMessage} />
}

function MessageCard({ id, onDelete }) {
  return <button onClick={() => onDelete(id)}>删除</button>
}

点击后，子组件拨打 onDelete 这部电话，并把 id 告诉父组件。真正修改列表的是拥有数据的父组件。

出错时怎么判断

页面显示空白或 undefined

先比较两边名字：父组件传的是 text，子组件是不是写成了 message？props 名字必须对得上。

点击时报错 not a function

TypeError: onDelete is not a function

说明子组件想调用 onDelete，但父组件没有传函数，或名字拼错了。

数据变了但页面没按预期改

props 来自父组件。继续向上找：父组件把什么值传进来了？那个值对应的 state 有没有更新？

自己试试

在一个组件标签上找到一个属性，例如 <Avatar name={user.name} />。先不要改代码，只顺着做：找到 Avatar 定义，确认它怎样取出 name，再回到父组件查 user.name 从哪里来。

子组件想删除父组件列表里的一项，通常应该怎么做？

答案：父组件把删除函数通过 props 传给子组件，子组件点击时调用它，并把要删除的 ID 传回去。