当前位置：首页 > news >正文

React03 组件 Props

news 2026/2/8 15:35:05

组件 & Props

React 组件
- 函数（ Function ）组件
- 类（ Class ）组件
Props
- 将 props 传递给子组件
- 在子组件中读取 props
- 给 prop 指定一个默认值
- 使用 JSX 展开语法传递 props

React 组件

组件本质上就是类和函数，但是与常规的类和函数不同的是，组件承载了渲染视图的 UI 和更新视图的 setState 、useState 等方法。React 在底层逻辑上会像正常实例化类和正常执行函数那样处理的组件。

因此，函数与类上的特性在 React 组件上同样具有，比如原型链，继承，静态属性等，所以不要把 React 组件和类与函数独立开来。

函数（ Function ）组件

接收唯一带有数据的 props 对象与并返回一个 React 元素
函数式组件定义时首字母必须大写
render渲染时必须使用标签

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

类（ Class ）组件

类组件必须继承React.Component
必须写render函数
必须有返回值

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

Props

React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。

将 props 传递给子组件

export default function Profile() {return (<Avatarperson={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}size={100}/>);
}

在子组件中读取 props

function Avatar({ person, size }) {// 在这里 person 和 size 是可访问的
}

给 prop 指定一个默认值

function Avatar({ person, size = 100 }) {// ...
}

使用 JSX 展开语法传递 props

有时候，传递 props 会变得非常重复：

function Profile({ person, size, isSepia, thickBorder }) {return (<div className="card"><Avatarperson={person}size={size}isSepia={isSepia}thickBorder={thickBorder}/></div>);
}

重复代码没有错（它可以更清晰）。但有时你可能会重视简洁。一些组件将它们所有的 props 转发给子组件，正如 Profile 转给 Avatar 那样。因为这些组件不直接使用他们本身的任何 props，所以使用更简洁的“展开”语法是有意义的：

function Profile(props) {return (<div className="card"><Avatar {...props} /></div>);
}

这会将 Profile 的所有 props 转发到 Avatar，而不列出每个名字。