react 入門-建立元件（2）無狀態功能函式法
阿新 • • 發佈：2018-11-14
前面說的是通過繼承React.Component建立React元件。
還可以通過無狀態的功能函式構造React元件。
舉例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Components</title>
</head>
<body>
<!-- Target Container -->
<div id="react-container"></div> 宣告一個無狀態功能函式 foodList：其中
items是傳入的形參引數；
React.createElement是函式體和返回值
const foodList = ({items}) =>
React.createElement(
"ul",
{className: "food-list"},
items.map((item, i) =>
React.createElement("li", { key: i }, item)
)
)另外一個匿名函式是items.map（）裡面的作為引數傳入的函式
item是 items數組裡的每一個值，i是items陣列的index, item = items[i]
items.map((item, i) =>
React.createElement("li", { key: i }, item)
)這句的作用是把 items裡面的每個值，轉換成一個React Element。
每個item都構造成對應html的<li>,包含一個key的屬性以及item的內容。
ReactDOM.render(
React.createElement(foodList, {items}, null),
document.getElementById('react-container')
)在ReactDom渲染的時候，以前面建立的無狀態功能函式foodList構造React.createElement，並傳入實參{items}。