普通組件 · React講義

# 基本組件（構造函數） ## 定義組件和使用組件基礎語法 **通過構造函數定義組件** `function Name(){ return null }` **使用組件** `<Name></name>` ## 案例 ~~~ function Hello() { return <div> 這是一個div <h1>這是一個大大的h1</h1> </div>; } ReactDOM.render(<Hello></Hello>, document.getElementById('app')) ~~~ <iframe width="100%" height="300" src="//jsrun.net/6FyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> # 注意事項 ## 組件返回值 ~~~ import React from 'react'; import ReactDOMfrom 'react-dom' ? function Hello() { ? } ReactDOM.render(<Hello ></Hello>, document.getElementById('app')) ~~~ ~~~ Uncaught Invariant Violation: Hello(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. ~~~ Hello組件。沒有從呈現返回任何內容。這通常意味著缺少返回語句。或者，若不呈現任何內容，則返回空值 ## 在定義組件時組件名稱必須以大寫開頭。因為是構造函數。如果小寫會報以下錯誤： ~~~ import React from 'react'; import ReactDOMfrom 'react-dom' function hello() { ?return <div> ? 你好 ?</div>; } ReactDOM.render(<hello ></hello>, document.getElementById('app')) ~~~ 這個hello標簽瀏覽器中不存在，如果你想用React組件，那么請用首字母大寫開頭。 ~~~ react-dom.development.js:506 Warning: The tag <hello> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.in hello ~~~ ## 總結定義普通組件，我們可以認為是構造函數。首字母大寫。且構造函數中必須手動返回結構如果沒有結構手動返回null;