1.6 KiB
1.6 KiB
id, title, challengeType, forumTopicId
| id | title | challengeType | forumTopicId |
|---|---|---|---|
| 5a24c314108439a4d4036165 | 使用 React 渲染嵌套组件 | 6 | 301420 |
--description--
上一个挑战显示了组合两个组件的简单方法，但是有许多不同的方法可以把 React 组件组合在一起。
组件组合是 React 的强大功能之一。当你使用 React 时，应当先用组件的思路考虑清楚用户界面的结构（如上一个挑战中的 App 示例）。可以将 UI 分解为基本的构建块，这些构建块就是组件。这样做有助于将负责 UI 的代码与负责处理应用程序逻辑的代码分开，并可以大大简化复杂项目的开发和维护。
--instructions--
代码编辑器中定义了两个功能组件，分别是TypesOfFruit和Fruits。请把TypesOfFruit组件放到Fruits组件中，然后把Fruits组件放到TypesOfFood组件中。结果应该是子组件嵌套在父组件中，父组件嵌套在它本身的父组件中！
--hints--
TypesOfFood组件应该返回单个div元素。
assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div');
TypesOfFood组件应该返回Fruits组件。
assert(
Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type
.name === 'Fruits'
);
Fruits组件应该返回TypesOfFruit组件。
assert(
Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() ===
'<h2>Fruits:</h2>'
);
TypesOfFruit组件应该返回h2和ul元素。
assert(
Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() ===
'ApplesBlueberriesStrawberriesBananas'
);