react 入门-创建组件无状态功能函数法
Posted teamlet
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react 入门-创建组件无状态功能函数法相关的知识，希望对你有一定的参考价值。
前面说的是通过继承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。
以上是关于react 入门-创建组件无状态功能函数法的主要内容，如果未能解决你的问题，请参考以下文章