Component - ly-yuan-kai/Demo GitHub Wiki
在 React 的中最基本的單元為元件(Component),每個元件也可以包含一個以上的子元件,並依照需求組裝成一個組合式的元件。
以下是一般 React Component 撰寫的主要兩種方式:
1.使用 ES6 的 Class
class HelloComponent extends React.Component {
// render 是 Class based 元件唯一必須的方法(method)
render() {
return (
<div>Hello World!</div>
);
}
}
// 將 <HelloComponent /> 元件插入 id 為 root的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('root'));
2.使用 Functional Component 寫法(沒有內部state):
const HelloComponent = () => (
<div>Hello World!</div>
);
// 將 <HelloComponent /> 元件插入 id 為 root的 DOM 元素中
ReactDOM.render(<HelloComponent />, document.getElementById('root'));