React（05）：使用react完成简单留言板案例

最新推荐文章于 2022-07-28 18:31:26 发布

jcat_李小黑

最新推荐文章于 2022-07-28 18:31:26 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43216105/article/details/106387451

版权

这篇博客通过一个简单的留言板案例，介绍了如何运用React的基本语法、jsx和组件化知识。作者强调了开发环境中引入库的选择，jsx的使用注意事项，如设置key属性和事件处理参数传递。此外，还提供了代码示例和相关React系列博文链接。

摘要由CSDN通过智能技术生成

前言

之前学了react基本语法和jsx/组件化，这里还是用ts学习时候的本地留言板案例来实践一下之前的学习语法；

正文

在这里插入图片描述

注意点

引入react、react-dom、babel，development是开发版；
使用jsx语法时候 script：type="text/babel";
使用cdn引入时设置 crossorigin 设置用户凭证；
使用jsx循环创建dom的时候，需要设置key；
向事件处理程序传递参数：删除方法<button onClick={(e) => this.deletData(i.id, e)}>删除</button></li>,e为 React 的事件对象；
如果不想有根节点：使用<React.Fragment> </React.Fragment>或<> </> 包裹；

代码-demo6.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用react完成简单留言板案例</title>

</head>

<body>
    <div id="app"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type