2.6 KiB
2.6 KiB
id, title, challengeType, forumTopicId, dashedName
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d4036163 | 創建一個 React 組件 | 6 | 301386 | create-a-react-component |
--description--
定義 React 組件的另一種方法是使用 ES6 的 class
語法。 在以下示例中,Kitten
擴展了React.Component
:
class Kitten extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<h1>Hi</h1>
);
}
}
這將創建一個 ES6 類 Kitten
,它擴展了 React.Component
類。 因此,Kitten
類現在可以訪問許多有用的 React 功能,例如本地狀態和生命週期鉤子。 如果還不熟悉這些術語,請不要擔心,在以後的挑戰中我們將更詳細地介紹它們。 另請注意,Kitten
類中定義了一個調用 super()
方法的 constructor
。 它使用 super()
調用父類的構造函數,即本例中的 React.Component
。 構造函數是使用 class
關鍵字創建的特殊方法,它在實例初始化之前調用。 最佳做法是在組件的 constructor
裏調用 super
,並將 props
傳遞給它們, 這樣可以保證組件能夠正確地初始化。 目前爲止 ,需要知道這些代碼是必要的。 很快會了解到到構造函數的其他用途以及 props
。
--instructions--
MyComponent
是使用類語法在代碼編輯器中定義的。 完成 render
方法的編寫,使其返回 div
元素,其中包含文本內容爲 Hello React!
的 h1
元素。
--hints--
該 React 組件應該返回一個 div
元素。
assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
返回的 div
中應該渲染一個 h1
標題元素。
assert(
/<div><h1>.*<\/h1><\/div>/.test(
Enzyme.shallow(React.createElement(MyComponent)).html()
)
);
h1
標題元素中應該包含字符串 Hello React!
。
assert(
Enzyme.shallow(React.createElement(MyComponent)).html() ===
'<div><h1>Hello React!</h1></div>'
);
--seed--
--after-user-code--
ReactDOM.render(<MyComponent />, document.getElementById('root'))
--seed-contents--
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
// Change code below this line
// Change code above this line
}
};
--solutions--
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
// Change code below this line
return (
<div>
<h1>Hello React!</h1>
</div>
);
// Change code above this line
}
};