Props 属性传递

最后更新：2026-10-28

props 是父组件传给子组件的数据，像函数参数一样只读。子组件通过 props 接收文本、数字、对象甚至组件，从而在不同场景渲染不同内容——这是 React 数据流的基础机制。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

function Badge({ text, color }) {  // 解构 props
  return <span style={{ color }}>{text}</span>
}

<Badge text="新" color="red" />     // 父组件传入数据

props	父组件传入的所有属性的集合对象；通常在函数参数里直接解构出需要的字段。

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

一个彩色徽章显示「当前等级：入门」，下方三个切换按钮；点击「进阶 / 大师」后徽章的文字与颜色随之变化——父组件把新数据经 props 传给了子组件。

⚠️ 注意 props 只读：子组件里直接修改 props 会破坏单向数据流，需要变化就通过回调让父组件改状态。

💡 提示 推荐参数解构写法 ({ name, size })，比到处写 props.name 更清晰，也利于一眼看出组件依赖。

ℹ️ 说明 props 可以传任何值：字符串、数字、数组、函数、JSX，甚至另一个组件。

更多案例整理中，敬请期待。

Q props 可以修改吗？

A 不可以。props 属于父组件，子组件只能读取；要改变表现，应通过回调 props 通知父组件更新它的状态。

Q props 和 state 有什么区别？

A props 由外部传入且只读，state 由组件自己持有且可更新；两者变化都会触发重渲染。

Q 子组件怎么把数据传回父组件？

A 父组件把一个函数作为 prop 传下去（如 onChange），子组件在合适时机调用它并携带数据，由父组件决定如何更新。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。