JSX 语法
2024-09-04 23:59:34
jsx 不能直接运行，是被 babel-loader 中的 react 这个 preset 翻译的
需要注意：
1.必须被一个单独的大标签包裹，比如：div 或者 section
2.标签必须封闭
3.class 要写成 className， for 要写成 htmlFor
4.HTML 注释不能使用，只能使用 JS 注释
5.原生标签，比如：p、li、div 如果要使用自定义属性，必须用 data- 前缀。
<p data-a="10"></p>
如果是自定义标签，此时可以随便传属性：
<App a="10"></App>
6.JS 表达式用 { } 单大括号包裹。
在 JSX 中不能使用 if...else... 语句，但可以使用 conditional (三元运算) 表达式来替代。
7.可以运行函数
8.样式使用双大括号
9.可以使用数组，数组中如果是 JSX 语法，数组会被自动展开，所以不需要使用 ng-repeat 或 v-for 这样的指令展开数组。
class List extends Component {
// 组件中最重要的方法就是render方法,render是渲染的意思
render() {
/**
* 定义一个数组
* map 映射成一个数组
* 定义的JSX项目上要求有key属性,只要是重复的数组项目,都要有不能重复的key属性,这是要求。
*/
let arr = ["白板","幺鸡","二条"].map((item,index)=>{
return <li key={index}>{item}</li>
});
// 返回一个jsx语法,非常牛逼语法
return <ul>{arr}</ul>
}
}
效果图：
10.小写字母开头为原生标签，大写字母开头为React组件。
最新文章
- 记一个界面刷新相关的Bug
- outlook备份及恢复
- PHP爬虫技术（一）
- Newtonsoft.Json 与 DataTable的相互转换
- iOS 9之应用内搜索(CoreSpotlight）API
- Hibernate各保存方法之间的差 (save,persist,update,saveOrUpdte,merge,flush,lock)等一下
- canvas 之刮刮卡
- C++primer 9.49
- 类string解析
- js比较日期大小
- 状压dp入门
- spring cloud 专题二（spring cloud 入门搭建 之 微服务搭建和注册）
- expect 批量自动部署ssh 免密登陆 之 三
- Source Insight 4.0安装使用教程
- 学习使用github
- Python的条件判断语句------if/else语句
- [LeetCode] Department Highest Salary -- 数据库知识(mysql)
- 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第4章编程练习6
- Linux下解压缩
- 开始使用Reflection