react中封装组件的基本举例
时间: 2023-11-15 15:48:58 浏览: 48
好的,下面是一个简单的示例:
假设我们需要封装一个显示用户信息的组件 UserCard,包括用户头像、用户名、年龄等信息。
1. 创建一个名为 UserCard 的文件,并在其中定义组件:
```javascript
import React from 'react';
const UserCard = ({ avatarUrl, name, age }) => {
return (
<div className="user-card">
<img src={avatarUrl} alt={`Avatar of ${name}`} />
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
};
export default UserCard;
```
2. 在需要使用 UserCard 组件的地方,导入并使用它:
```javascript
import React from 'react';
import UserCard from './UserCard';
const App = () => {
const user = {
avatarUrl: 'https://example.com/avatar.png',
name: 'John Doe',
age: 30,
};
return (
<div>
<UserCard {...user} />
</div>
);
};
export default App;
```
这样,我们就成功封装了一个 UserCard 组件,并且可以在其他地方方便地使用它。