接著React基礎(chǔ)(一)
1.用.createClass創(chuàng)建一個(gè)簡(jiǎn)單的組件(es5)
var Hello = React.createClass({
render:function(){
return(
<div>hello</div>
)
}
});
ReactDOM.render(<Hello />,document.getElementById("root"));
注意:
1.組件的首字母必須大寫(xiě)
2.組件只能存在一個(gè)根元素
2.組件的屬性:props
var titles=‘標(biāo)題’柑司;
var Hello = React.createClass({
render:function(){
return(
<div>{this.props.title}{this.props.content}</div>
//要獲取倆個(gè)時(shí)要用{}分開(kāi)
)
}
});
ReactDOM.render(
<Hello title={titles} content="demo"/>,
document.getElementById("root")
);
//title后的值拣播,可以是具體的值也可以是對(duì)象,其他同理
3.添加樣式
3.1內(nèi)聯(lián)樣式:必須遵循駝峰樣式
var HelloReact = React.createClass({
render:function(){
return(
<div style={{color:'red',fontSize:'20px'}}>hello React</div>
)
}
});
ReactDOM.render(<HelloReact />咒劲, document.getElementById("root")
);
或
var styleObj = {
color:"red",
fontSize:"40px"
};
var HelloReact = React.createClass({
render:function(){
return(
<div style={styleObj}>hello React</div>
)
}
});
ReactDOM.render(<HelloReact />,document.getElementById("root"));
3.2外聯(lián)樣式
return(<div className='類名'>hello React</div>)
注意:
不能用class伪货,因?yàn)閏lass是es6關(guān)鍵字巍虫,es5保留關(guān)鍵字匾灶,所以要改成className,
在樣式表中寫(xiě)樣式