---
title: React - Components
localeTitle: 反应 - 组件
---
## 反应 - 组件
组件可在react.js中重用。您可以将值注入道具,如下所示:
```jsx
function Welcome(props) {
return
Hello, {props.name}
;
}
const element = ;
ReactDOM.render(
element,
document.getElementById('root')
);
```
`name="Faisal Arkan"`将从`function Welcome(props)`赋予`{props.name}`值,并返回已通过`name="Faisal Arkan"`赋予值的组件,之后反应将元素转换为html。
### 声明组件的其他方法
使用React.js时,有许多方法可以声明组件,但有两种组件, **_无状态_**组件和**_有状态_**组件。
### 有状态
#### 类类型组件
```jsx
class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
{this.props.name}
{this.props.color}
);
}
}
```
### 无状态组件
#### 功能组件(ES6的箭头功能)
```jsx
const Cat = props => {
return (
{props.name}
{props.color}
;
);
};
```
#### 隐式返回组件
```jsx
const Cat = props =>
{props.name}
{props.color}
;
```