react 入门-创建组件（2）无状态功能函数法

来源：互联网发布：绿盾监控软件编辑：程序博客网时间：2024/06/10 07:40

前面说的是通过继承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}。

阅读全文

0 0