您的位置：首页 > Web前端 > React

react

2016-03-10 21:46 711 查看 
<!DOCTYPEhtml>
<html>
<head>
<title>Helloworld</title>
<scriptsrc="..../.react.js"></script>
<scriptsrc=".../.JSXTransformer.js"></script>
</head>
<body>
<scripttype="text/jsx">

varHelloWorld=React.createClass({

render:function(){

return<p>Hellowold!</p>

}

}),

React.render(<helloWorld></HelloWorld>,document.body);

</script>

</body>
</html>


首先注意。1).我们创建的组件名首字母要大写，主要是为了和html原来有的组件区分开来，因为html中的标签都是小写开头的。

2).React.render(<helloWorld></HelloWorld>,document.body);后面的doucment.body的意思是将这个标签添加到document.body中去。

(2).JSX的语法

先看下面的一个例子

varHelloMessage=React.createClass({

renderfunction(){
return<divclassName="test">hello{this.props.name}</div>

}
})

React.render(<HelloMessagename="john"></HelloMessage>,document.body);


首先自定义的标签名首字母要大写,其次我们可以通过{this.props.name}来获取标签属性值，此处值为john。注意一定要用{}包裹起来才可以。{}里面是javascript的一个求值表达式。但是不能是语句。例如if语句，switch语句等不能。我们还可以放一个函数的调用。函数名一般是驼峰命名。此外在这里对于class和for属性要写成className和htmlFor来代替。

(3).注释

单行注释：//

多行注释：/*.....*/

对于react注释有两种，一，子节点注释:要用大括号包裹起来

renderfunction(){
return<divclassName="test">hello{
//adjadahj;
/*ajkdalk
jsdflfja*/
}{this.props.name}</div>

}
属性节点注释：

renderfunction(){
return<div/*asfdaf*/className="test"//afagsagfsa;>hello{this.props.name}</div>

}

css属性添加


<scripttype="text/jsx">
varstyle={
color:red;
font-size:16px;
}

varHelloWorld=React.createClass({

render:function(){

return<p>Hellowold!</p>

}

}),
React.render(<divstyle={style}><helloWorld></HelloWorld></div>,document.body);

</script>


首先，我们创建一个css对象，其次我们创建的对象是不能直接在自定义组件上设置的，所以我们一般在自定义组件外面包裹一个div，然后将css一个对象属性添加到div上面，但是我们要注意，我们给div的style添加的是一个css对象属性，所以有{}。

(4).{}表达式的书写方式。

varHelloMessage=React.createClass({

renderfunction(){
return<divclassName="test">hello{this.props.name}</div>

}
})

React.render(<HelloMessagename="john"></HelloMessage>,document.body);


如果我们需要实现这样的功能，如果有name属性的话，就输出hellthis.props.name;如果没有的话，就输出helloworld

{if(this.props.name){

returnthis.props.name;

}else{

return"world";

}

}这种方式会出错，因为{}这里面是一个语句而不是一个表达式。

正确的方法有

1：三元表达式：{this.props.name?this.props.name:"world";}

2:变量

varHelloMessage=React.createClass({
getName:function(){
if(this.props.name){
returnthis.props.name;
}else{
return"world";

}

}
render:function(){
varname=getName();
return<divclassName="test">hello,{name}</div>

}
})

React.render(<HelloMessagename="john"></HelloMessage>,document.body);

方法三：函数


varHelloMessage=React.createClass({
getName:function(){
if(this.props.name){
returnthis.props.name;
}else{
return"world";
}

}
render:function(){
return<divclassName="test">hello,{getName()}
</div>
}
}
)

React.render(<HelloMessagename="john"></HelloMessage>,document.body);


最后一种方法：逻辑方法

{this.props.name||"world"}

这句话的意思就是如果this.props.name为真的话就返回this.props.name.如果为假的话就返回"world";



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航