ReactJS編程（二）——自定義組件

原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭。其實ReactJS編程（一）中，已經自定義了Name、Url等組件進行頁面元素封裝。寫法很簡單，如下。

<script type="text/babel">
//自定義一個HelloMessage組件
function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
//定義element接收組件
const element = <HelloMessage />;

ReactDOM.render(
    element,
    document.getElementById('example')
);
</script>

升級版

//升級版 需要向組件傳遞參數

function HelloMessage(props) {
    //通過 props.name 來獲取name 屬性
    return <h1>Hello {props.name}!</h1>;
}
 
//定義element變量，接收自定義組件HelloMessage的值
const element = <HelloMessage name="max"/>;
 
//將element渲染顯示頁面
ReactDOM.render(
    element,
    document.getElementById('example')
);