使用属性Props完成一张卡片
2024-10-19 22:38:09
一:我们先安装bootstrap，为了使我们的样式好看些 cnpm install bootstrap --save
二：我们在index.js中引入bootstap
Import ‘bootstrap/dist/css/bootstrap.min.css’
三：我们新建一个conponments文件夹，然后我们新建一个NameCard.js
然后我们在App.js中引入NameCard组件,并在标签中传入我们想要的值name和number
注意:如果小伙伴们是跟着上一届节的程序走的话，我们需要进入index.js中把Welcome改为App,如果是这一节直接写的，就不用担心这个问题了
四：运行我们的项就可以了目cnpm start
五：我们接下来在添加一个是否是人类和一个标签
首先我们使用三元表达式来判断是否是人类，我们在NameCard的里面添加 isHuman ? ‘人类’:’外星人’；在添加标签的时候我们使用map去循环
这里面有一个知识点需要注意，就是span标签中的key值,正常情况下我们接收到后台传过来的值之后，都会随带一个索引，这个key我们一般都用这个索引来表示，也可以理解成唯一的。他和vue中 v-for是一个道理的，但是这里当后台给我们传给我们的数据基本都会带一个id，我们如果把key值用这个id来表示，他其实响应效果要比用index好一点；这里我们为了简单，就用index了。
随后，我们需要在App.js中添加我们的tags,我们自定义一个数组const tags = [‘恐龙’,’超人’];在NameCard组件中引入isHunman和 tags = {tags}
最新文章
- vert.x学习（三），Web开发之Thymeleaf模板的使用
- tomcat内存溢出处理
- 「译」JavaScript 的怪癖 1：隐式类型转换
- poj 1177 Picture (线段树 扫描线 离散化 矩形周长并)
- 开源而又强大的迷你型web服务器推荐
- Cocos开发中Visual Studio下HttpClient开发环境设置
- winform自定义文件程序-- 不允许所请求的注册表访问权(ZSSQL)
- .Net冷知识之动态查找类型时的程序集路径问题
- 一道C语言面试题：得到整数的M进制表示字符串
- Sass 基础和入门
- Xamarin.Forms+Prism（3）—— 简单提示UI的使用
- WebLogic部署报java.lang.ClassCastException: weblogic.xml.jaxp.RegistrySAXParserFactory cannot be cast to javax.xml.parsers.SAXParserFactory
- [WinForm]C# .net防止一个程序(WinForm)重复运行的方法。
- liunx 安装redis 4.0
- Python杂写1
- phpstudy如何安装ssl证书
- Luogu4630 APIO2018 Duathlon 圆方树、树形DP
- maven 配置 阿里仓库
- GO入门——4. 数组、切片与map
- 微信小程序里使用阿里巴巴矢量图标