转载请注明预见才能遇见的博客:http://my.csdn.net/
原文地址:http://blog.csdn.net/pcaxb/article/details/53927761
React开发-JSX使用与详解
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。JSX可以看作是JavaScript的扩展,看起来像XML语法。
render(){
let datas = [1,2,3,4];
let arrays = [
<div key={1}>01</div>,
<div key={2}>02</div>,
<div key={3}>03</div>
];
return <div>
{
datas.map(function(data){
return <div key={data} >{datas+":"+data}</div>;
})
}
{
arrays
}
{
[1].map(function(data){
if(data==1){
return true+":"+data;
}else{
return false+":"+data;
}
})
}
</div>
}
上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
1.属性表达式
如果需要在HTML中混入JavaScript变量值,需要利用{}来代替"",如果使用""就会变成字符串。
//创建Person类
let Person = React.createClass({
render(){
return <div>{this.props.name}</div>
}
});
//JSX调用
<Person name={1}/>
//直接JS调用
React.createElement(Person,{name:1});
//在Person外面再套一层div的调用
React.createElement('div',null,React.createElement(Person,{name:1}));
这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。说明:用React开发不一定就要使用JSX语法,可以直接使用原生的JS开发,但是官方推荐我们使用JSX语法,因外JSX在定义HTML这种树形结构时十分的简单方便。JSX有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更容易阅读。使用JSX之后需要使用babel解析器把JSX转化为JS语法。
2.注释
在React使用JSX里注释不能用HTML的注释(<!--HTML注释-->)方式,可以间接的使用JS注释和CSS注释。
HTML注释:<!--HTML注释-->
CSS注释:/*CSS注释*/
JS注释:单行注释//JS单行注释,多行注释/*JS多行注释*/,多行注释和CSS的注释一样的
//在标签里面注释可以直接使用/*注释*/,示例如下:
<Person /*age height*/ name={1111}/>
<a /*href=""*/ href="#" />
//在标签外面注释只能使用大括号{},示例如下:
{
/*这里可以写多行注释或者单行注释*/
//可以使用双斜杠注释写单行注释
}
说明:大括号里面其实写的是JS代码,所以可以使用JS的注释。由于CSS的注释和JS的多行注释一样,因此也可以使用。3.If-Else
在JSX中是不可以直接在{}中加入if-else的,可以使用下面这种三元表达式:
<Person name={data==1?'真:1':'假:非1'}/>
在JSX中间接的使用if-else的技巧let data = 0;
<Person name={
[1].map(function(data){
if(data==1){
return "真:1";
}else{
return "假:非1";
}
})
}/>
或者
let data = 0;
let result = '';
componentWillMount(){
if(data==1){
result = "真:1";
}else{
result = "假:非1";
}
}//这里也可以在别的函数里面判断
<Person name={result}/>
说明:如果三元表达式可以满足你的需求就使用三元表达式,如果三元表达式不能满足你的需求你就可以间接的使用if-else除了上面的使用方式之外还可以使用比较运算符“ || ”来书写,如果左边的值为真,则直接返回左边的值,否则返回右边的值,与if的效果相同。
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name || "World"}</div>;
}
});
4.函数表达式()有强制运算的作用,这里算是(4)的一个扩展,里面可以使用if-else、for等语句
//1
{
(
() => {
//1.箭头函数默认绑定了this的,所以这里的this可以省略
//2.()在箭头函数使用时只能放在外面,像function一样放到里面就会报错
//3.大括号里面的第一个小括号表示强制执行的意思
return '箭头函数执行了1';
}
)()
}
或者
//2
{
(
function(){
//1.(this)放到里面
//2.如果函数了内部没有使用this,这里的this也可以像箭头函数一样省略
//3.大括号里面的第一个小括号表示强制执行的意思
return '普通函数执行了1';
}(this)
)
}
或者
//3
{
(
function(){
//1.(this)放到外面
//2.如果函数了内部没有使用this,这里的this也可以像箭头函数一样省略
//3.大括号里面的第一个小括号表示强制执行的意思
return '普通函数执行了2';
})(this)
}
5.标签的属性className和htmlFor
在使用React中标签的属性class和for,都需要写成className和htmlFor,无论你是否使用JSX,因为两个属性是JavaScript的保留字和关键字。
<label className="xxx" htmlFor="input">content</label>
6.首字母小写还是大写的问题
渲染HTML标签,声明变量采用首字母小写
var myDivElement = <div className="foo" />;
渲染React组件,声明变量采用首字母大写var MyComponent = React.createClass({/*...*/});
说明:通过变量的声明,来区分HTML标签和React组件7.JSX延伸属性
(1)不要改变props
如果提前就知道了组件的属性的话,写起来很容易。例如component组件有两个动态的属性foo和bar:
var component = <Component foo={x} bar={y} />;
而实际上,有些属性可能是后续添加的,我们没办法一开始就确定,我们可能会写出下面不好的代码:var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad
这样写是错误的,因为我们手动直接添加的属性React后续没办法检查到属性类型错误,也就是说,当我们手动添加的属性发生类型错误时,在控制台是看不到错误信息的。在React的设定中,初始化完props后,props是不可变的。改变props会引起无法想象的后果。(2)延伸属性(为了解决(1)中的问题)
//定义一个组件
let Person = React.createClass({
getDefaultProps(){
return {name:'张三',age:12};
},
render(){
return <div>Name:{this.props.name}<br/>Age:{this.props.age}</div>
}
});
//延伸属性的使用
{
(
()=>{
let props = {};
props.name = '李四';
props.age = 21;
return <Person {...props} age={22} />
}
)()
}
说明:开发是可以通过{...props}的方式引入延伸属性,props是一个对象,然后往对象中添加属性。如果需要覆盖属性,可以像这里age一样重复添加一次。8.HTML转义
//假设这个是接口返回的富文本,是一个字符串
let richText = '<span>加入这个是后台返回的富文本,<a href="#">a</a>里面有很多标签里面有很多标签</span>';
//使用变量
{richText}
这是richText肯定会被当做是字符串,界面上将会显示"<span>加入这个是后台返回的富文本,<a href="#">a</a>里面有很多标签里面有很多标签</span>"如果这里不是接口返回的,我们就可以直接把单引号去掉,不作为字符串
let richText = <span>加入这个是后台返回的富文本,<a href="#">a</a>里面有很多标签里面有很多标签</span>;
这样就会显示正常,显示"加入这个是后台返回的富文本,a里面有很多标签里面有很多标签"
如果是接口返回的富文本,因为JSON传过来这里就是字符串,所以我们不像这里可以把单引号去掉,可以使用dangerouslySetInnerHTML属性,也可以显示正常
<div dangerouslySetInnerHTML={{__html:richText}} ></div>
说明:React默认会进行HTML的转义,避免XSS攻击,如果要不转义,可以使用dangerouslySetInnerHTML属性除了使用dangerouslySetInnerHTML属性以外还可以直接使用innerHTML,示例如下:
<div ref="fwb" ></div>
this.refs.fwb.innerHTML = '<span>加入这个是后台返回的富文本,<a href="#">a</a>里面有很多标签里面有很多标签</span>';
通过React的ref获取到元素DOM然后设置innerHTML属性,当然也可以通过其他方式获取到元素的节点,ref只是React的方式。9.自定义HTML属性
如果在编写React过程中使用了自定义属性,React是不会渲染的,比如:
React.render(
<div dd='xxx'>content</div>,
document.body
);
要想在编写React过程中使用自定义属性,需要写成下面的形式:React.render(
<div data-dd='xxx' aria-dd='xxx'>content</div>,
document.body
);
10.React的style={{}}
这里的最外层{}意思是通知JSX这里是JS语法,里面的{}的意思是样式的属性值只能是对象,而且也需要使用驼峰命名法,不能使用background-color,只能使用backgroundColor
11.JSX闭合标签(HTML某些标签可以不闭合,比如<img> <br> <input> <li> <p>)
在 JSX 中, <MyComponent /> 是合法的,而 <MyComponent> 就不合法。 所有的标签都必须闭合,可以是自闭和的形式,也可以是常规的闭合,<div />和<div></div>都是合法的。
12.JSX 根节点的最大数量
目前, 一个 component 的 render,只能返回一个节点。如果你需要返回一堆 div , 那你必须将你的组件用 一个div 或 span 或任何其他的组件包裹。切记,JSX 会被编译成常规的 JS; 因此返回两个函数也就没什么意义了,同样地,千万不要在三元操作符中放入超过一个子节点。
参考资料:点击打开链接 点击打开链接 点击打开链接 点击打开链接
博客地址:http://blog.csdn.net/pcaxb/article/details/53927761