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>
<!-- React Library & React DOM-->
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script>
const foodList = ({items}) =>
React.createElement(
"ul" ,
{className: "food-list"},
items.map((item, i) =>
React.createElement("li", { key: i }, item)
)
)
const items = [
"1 apple",
"1 banana",
"2 oranges",
"2 tomatos"
]
ReactDOM.render(
React.createElement(foodList, {items}, null ),
document.getElementById('react-container')
)
</script>
</body>
</html>
宣告一個無狀態功能函式 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}
。