4.2 KiB
4.2 KiB
id, title, challengeType, forumTopicId, dashedName
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d4036166 | 組合 React 組件 | 6 | 301381 | compose-react-components |
--description--
隨着挑戰繼續,將組合使用更復雜的 React 組件和 JSX,有一點需要注意。 在其它組件中渲染 ES6 風格的類組件和渲染在過去幾個挑戰中使用的簡單組件沒有什麼不同。 可以在其它組件中渲染 JSX 元素、無狀態功能組件和 ES6 類組件。
--instructions--
在代碼編輯器中,TypesOfFood
組件已經渲染了一個名爲 Vegetables
的組件。 此外,還有上次挑戰中的 Fruits
組件。
在 Fruits
中嵌套兩個組件,首先 NonCitrus
,然後是 Citrus
, 這兩個組件都已經引入。 接下來,將 Fruits
類組件嵌套到 TypesOfFood
組件中,位於 h1
標題元素下方和 Vegetables
上方。 結果應該是一系列嵌套的組件,它們使用兩種不同的組件類型。
--hints--
TypesOfFood
組件應該返回單個 div
元素。
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
return mockedComponent.children().type() === 'div';
})()
);
TypesOfFood
組件應該返回 Fruits
組件。
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
return mockedComponent.children().childAt(1).name() === 'Fruits';
})()
);
Fruits
組件應該返回 NonCitrus
組件和 Citrus
組件。
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
return (
mockedComponent.find('Fruits').children().find('NonCitrus').length ===
1 &&
mockedComponent.find('Fruits').children().find('Citrus').length === 1
);
})()
);
TypesOfFood
組件應該返回 Vegetables
組件,且其位於 Fruits
組件之下。
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
return mockedComponent.children().childAt(2).name() === 'Vegetables';
})()
);
--seed--
--before-user-code--
class NonCitrus extends React.Component {
render() {
return (
<div>
<h4>Non-Citrus:</h4>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Strawberries</li>
<li>Bananas</li>
</ul>
</div>
);
}
};
class Citrus extends React.Component {
render() {
return (
<div>
<h4>Citrus:</h4>
<ul>
<li>Lemon</li>
<li>Lime</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
</div>
);
}
};
class Vegetables extends React.Component {
render() {
return (
<div>
<h2>Vegetables:</h2>
<ul>
<li>Brussel Sprouts</li>
<li>Broccoli</li>
<li>Squash</li>
</ul>
</div>
);
}
};
--after-user-code--
ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
--seed-contents--
class Fruits extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Fruits:</h2>
{ /* Change code below this line */ }
{ /* Change code above this line */ }
</div>
);
}
};
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Food:</h1>
{ /* Change code below this line */ }
{ /* Change code above this line */ }
<Vegetables />
</div>
);
}
};
--solutions--
class Fruits extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Fruits:</h2>
{ /* Change code below this line */ }
<NonCitrus />
<Citrus />
{ /* Change code above this line */ }
</div>
)
}
}
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Food:</h1>
{ /* Change code below this line */ }
<Fruits />
{ /* Change code above this line */ }
<Vegetables />
</div>
);
}
};