接着React基础(一)
1.用.createClass创建一个简单的组件(es5)
var Hello = React.createClass({
render:function(){
return(
<div>hello</div>
)
}
});
ReactDOM.render(<Hello />,document.getElementById("root"));
注意:
1.组件的首字母必须大写
2.组件只能存在一个根元素
2.组件的属性:props
var titles=‘标题’;
var Hello = React.createClass({
render:function(){
return(
<div>{this.props.title}{this.props.content}</div>
//要获取俩个时要用{}分开
)
}
});
ReactDOM.render(
<Hello title={titles} content="demo"/>,
document.getElementById("root")
);
//title后的值,可以是具体的值也可以是对象,其他同理
3.添加样式
3.1内联样式:必须遵循驼峰样式
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外联样式
return(<div className='类名'>hello React</div>)
注意:
不能用class,因为class是es6关键字,es5保留关键字,所以要改成className,
在样式表中写样式