JSX基本知识点
来源:互联网 发布:广电网络缴费营业厅 编辑:程序博客网 时间:2024/05/16 14:17
JSX即javascript XML
JSX是基于ECMAScript平台的一种新特性
一种定义带属性树结构的语法
JSX不是XML或者HTML
不是一种限制
特点:
类XML语法容易接受
增强JS语义
结构清晰
抽象程度高
代码模块化
语法:
var HelloMessage=React.createClass({
render:function(){
return <div className='test'>Hello {this.props.name}</div>
}
});
React.render(<HelloMessage name="john"/>,mountNode);
自定义组件首字母大写
组件与组件之间可以嵌套
求值表达式 “{ }”
驼峰命名
注释:可以在子节点或者属性位置添加注释
htmlFor和className
var HelloWorld=React.createClass({
render:function(){
return <p /*
这是属性位置的注释
*/>hello,world{/*
这是子节点位置的注释
*/}</p>
}
})
React.render(<HelloWorld></HelloWorld>,document.body);
添加css样式:
var style={
color:red,
border:1px
}
var HelloWorld=React.createClass({
render:function(){
return <p>hello,world</p>
}
})
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);
条件判断的四种写法:
{三元表达式}
使用中间变量
使用函数
使用比较运算符(或运算符)
使用闭包匿名表达式
JSX非DOM属性
dangerouslySetInnerHTML 在JSX中直接插入HTML
var obj={
__html:"<h1> hello react</h1>"
};
React.render(<div dangerouslySetInnerHTML={obj}></div>,document.body);
ref 父组件引用子组件
var obj={
__html:"<h1> hello react</h1>"
}
var HelloWorld=React.createClass({
render:function(){
return <p ref="child">hello,world</p>
}
})
React.render(<div dangerouslySetInnerHTML={obj}></div>,document.body);
key 提高渲染性能
内容相似的尽量合并为同一个组件,在列表中尽量使用唯一的key,这样可以大幅提升性能
var obj={
__html:"<h1> hello react</h1>"
}
var HelloWorld=React.createClass({
render:function(){
return <ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
</ul>
}
})
React.render(<div dangerouslySetInnerHTML={obj}></div>,document.body);
- JSX基本知识点
- JSX 的基本语法规则
- JSX
- 基本知识点
- 基本知识点
- 基本知识点
- 基本知识点
- 基本排序算法 - 基本知识点
- 线程基本知识点
- C++基本知识点
- 交换机的基本知识点
- 自我介绍的基本知识点
- ExtJs基本知识点
- seo基本知识点
- 图论基本知识点
- 网站采集基本知识点
- Java基本的知识点
- 图论基本知识点
- 教你快速高效接入SDK——总体思路和架构
- 解析PHP缓存函数的使用说明
- C++静态库与动态库
- C#调用C++ dll时CallingConvention调用约定详解
- 面试题23:从上往下打印二叉树
- JSX基本知识点
- Hyper-v 虚拟机安装win7
- table超长部分用...代替
- 【CUDA并行程序设计系列(1)】GPU技术简介
- Leetcode Minimum Size Subarray Sum
- hdu1196 Lowest Bit
- 九度OJ 1123:采药 (01背包、DP、DFS)
- LinuxCNC+EtherCAT(3)翻译一篇东西KINS——LinuxCNC中的HAL运动学组件~~~~~~~~~
- 带你玩转Visual Studio——带你理解多字节编码与Unicode码