react里面的this_react类的使用

react开发环境：添加3个script,前面文章说明了，可以参考。

后续文章专注于你添加的代码。

react 类

//添加你的代码，完成一些功能，开始添加

class Player extends React.Component{

  render(){
    return(
       
         
          <div>{this.props.name }. </div>        
        


      );


  }


}


ReactDOM.render(

<Player name={"kate"} />,
document.getElementById('example')
);

//结束你添加的代码

使用类，

和函数调用一样

<类名 参数名={参数值}>

类定义，

类Player继承了组件类

里面有

render(){}

里面有return

使用类的时候，传递了一个参数进去

定义类的时候，使用this.props.name接收了参数。

return里面添加了标签<div>

如果去掉标签的话，会出错，可以试试。

从这里还看不出来，类有什么用。

因为函数也可以做到这个。

那到底

react里面的类有什么用呢？

参考：

React – 用于构建用户界面的 JavaScript 库​reactjs.bootcss.com

一个空壳子类

class ShoppingList extends React.Component{
  render(){

     return(
     <div>
    </div>

    );
   }
}

ReactDOM.render(

<ShoppingList name="Mark" />,
document.getElementById('example')
);

一个有内容的类

//添加你的代码，完成一些功能，开始添加

class ShoppingList extends React.Component{
  render(){

     return(
     <div>
     <h1>{this.props.name}</h1>
     <ul>
         <li>清华大学</li><li>北京大学</li>
    </ul>
    </div>

    );
   }
}

ReactDOM.render(

<ShoppingList name="大学" />,
document.getElementById('example')
);

//结束你添加的代码

ShoppingList

是一个组件类

是一个组件类型

组件接收参数 props

也就是属性properties缩写

render是方法

该方法返回显示在屏幕上的内容

如何给组件添加交互功能，

如何给组件添加构造函数。

未完