React组件(二)

接着React基础(一)

1.用.createClass创建一个简单的组件(es5)
var Hello = React.createClass({
        render:function(){
          return(
            
hello
) } }); ReactDOM.render(,document.getElementById("root"));

注意:
1.组件的首字母必须大写
2.组件只能存在一个根元素

2.组件的属性:props
var titles=‘标题’;
var Hello = React.createClass({
        render:function(){
          return(
            
{this.props.title}{this.props.content}
//要获取俩个时要用{}分开 ) } }); ReactDOM.render( , document.getElementById("root") ); //title后的值,可以是具体的值也可以是对象,其他同理
3.添加样式

3.1内联样式:必须遵循驼峰样式

var HelloReact = React.createClass({
         render:function(){
               return(
                  
hello React
) } }); ReactDOM.render(, document.getElementById("root") );

var styleObj = {
      color:"red",
      fontSize:"40px"
    };
var HelloReact = React.createClass({
      render:function(){
           return(
              
hello React
) } }); ReactDOM.render(,document.getElementById("root"));

3.2外联样式

return(
hello React
)

注意:
不能用class,因为class是es6关键字,es5保留关键字,所以要改成className,
在样式表中写样式

不变的样式用外联,动态的样式用内联

你可能感兴趣的:(React组件(二))