前面說的是通過繼承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/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/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}。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
