freeCodeCamp/guide/chinese/certifications/front-end-libraries/react/use-react-to-render-nested-.../index.md

22 lines
782 B
Markdown
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

---
title: Use React to Render Nested Components
localeTitle: 使用React渲染嵌套组件
---
## 使用React渲染嵌套组件
您在前面的课程中已经了解到有两种方法可以创建React组件
1. 无状态功能组件 - 使用JavaScript函数。
2. 使用ES6语法定义React组件。
在这个测验中我们定义了两个无状态功能组件即使用JavaScript函数。回想一下一旦创建了一个组件就可以使用HTML开始和结束括号内的组件名称以与HTML标签相同的方式呈现它。例如要将名为Dog的组件嵌套在名为Animals的父组件中您只需从Animals组件返回Dog组件如下所示
```javascript
return (
<Dog />
)
```
尝试使用TypesOfFruit和Fruits组件。