传值（props）

给组件传“指令”，改变它的外观和行为

要点

props 是传给组件的“订单”，写法和 HTML 属性一样
接收方通过函数参数来接收：function Greeting({ name }) { ... }
不要修改收到的 props。需要改的时候，由传值的一方来改

动手试试

function Greeting({ name }: { name: string }) {
  return <p>你好，{name}</p>
}

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      <Greeting name="张伟" />
      <Greeting name="李娜" />
    </div>
  )
}

Open Sandbox

再加第三个 Greeting
给 Greeting 也传入 age（年龄），显示“N 岁”（提示：{ name, age }）
试试忘记传 name 会怎样

常见错误

组件名要以大写字母开头

写成小写的 <greeting>，会被当作 HTML 标签。自己写的组件要像 <Greeting> 这样以大写字母开头。

传字符串以外的值，要用 { } 包起来

name="张伟" 是字符串。要传数字或变量，就像 age={30} 这样用 { } 包起来。