Previously, the react component was created by inheriting React.component. The
can also construct react components through stateless functional functions.
Example
<! 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>
Declare a stateless function foodList:
items is the parameter parameter passed in;
React.createElement is the function body and return value
const foodList = ((items)) =>
React.createElement (
"ul",
{className: "food-list"},
items.map ((item, i) =>
React.createElement ("li", {key: i}, item)
)
)
Another anonymous function is the function passed as a parameter in items.map ()
item is each value in the items array, i is the index of the items array, item = items [i]
items.map ((item, i) =>
React.createElement ("li", {key: i}, item)
)
The role of this sentence is to convert each value in items into a React Element.
Each item is structured as a <li> corresponding to the html, containing a key attribute and the content of the item.
ReactDOM.render (
React.createElement (foodList, {items}, null),
document.getElementById ('react-container')
)
When ReactDom renders, construct React.createElement with the stateless function foodList created earlier, and pass in the actual parameter {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
