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

最新推荐文章于 2023-04-14 17:44:39 发布

teamlet

最新推荐文章于 2023-04-14 17:44:39 发布

阅读量1.7k

点赞数

分类专栏： react javascript 文章标签： react

本文链接：https://blog.csdn.net/teamlet/article/details/78796959

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

react

6 篇文章 0 订阅

订阅专栏

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

teamlet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 入门-创建组件（2）无状态功能函数法

前面说的是通过继承React.Component创建React组件。还可以通过无状态的功能函数构造React组件。
复制链接

扫一扫

专栏目录

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

举例

“相关推荐”对你有帮助么？