id	title	challengeType	forumTopicId
5a24c314108439a4d4036165	使用 React 渲染嵌套组件	6	301420

--description--

上一个挑战显示了组合两个组件的简单方法，但是有许多不同的方法可以把 React 组件组合在一起。

组件组合是 React 的强大功能之一。当你使用 React 时，应当先用组件的思路考虑清楚用户界面的结构（如上一个挑战中的 App 示例）。可以将 UI 分解为基本的构建块，这些构建块就是组件。这样做有助于将负责 UI 的代码与负责处理应用程序逻辑的代码分开，并可以大大简化复杂项目的开发和维护。

--instructions--

代码编辑器中定义了两个功能组件，分别是TypesOfFruit和Fruits。请把TypesOfFruit组件放到Fruits组件中，然后把Fruits组件放到TypesOfFood组件中。结果应该是子组件嵌套在父组件中，父组件嵌套在它本身的父组件中！

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'
);