49 lines
930 B
Markdown
49 lines
930 B
Markdown
|
---
|
|||
|
|
title: Compose React Components
|
|||
|
|
localeTitle: 撰写反应组件
|
|||
|
|
---
|
|||
|
|
## 撰写反应组件
|
|||
|
|
|
|||
|
|
### 暗示
|
|||
|
|
|
|||
|
|
使用嵌套组件，如上一个问题所述，以呈现组件。
|
|||
|
|
|
|||
|
|
### 解
|
|||
|
|
|
|||
|
|
以下是chakkenge的解决方案，它在一个组件中呈现Citrus和NonCitrus，然后在另一个组件中呈现：
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
class Fruits extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
}
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<h2>Fruits:</h2>
|
|||
|
|
<NonCitrus />
|
|||
|
|
<Citrus />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
class TypesOfFood extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
}
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<Fruits />
|
|||
|
|
<Vegetables />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 相关链接：
|
|||
|
|
|
|||
|
|
* [组件和道具](https://reactjs.org/docs/components-and-props.html)
|
|||
|
|
* [嵌套组件](http://www.reactjstutorial.net/nested-components.html)
|