理解课程中constructor和render方法中this的指向,以及如何传递参数
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 准备好一个容器,用于挂载虚拟DOM -->
<div id="hello"></div>
<!-- 引入React核心库 -->
<script type="text/javascript" src="js/react.development.js"></script>
<!-- 引入react-dom,用于支持React操作DOM -->
<script type="text/javascript" src="js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="js/babel.min.js"></script>
<!-- 这里一定要写text/babel -->
<script type="text/babel">
//1. 创建类式组件
class MyComponent extends React.Component{
constructor(props){
super(props)
console.log("constructor中的this",this) //查看constructor的this是什么?
}
render(){
//render是放在哪里的?--MyComponent的原型对象
//render中的this是谁?
console.log("render中的this",this) //查看render的this是什么?
return <h1> hello React</h1>
}
}
//2. 渲染虚拟DOM到
ReactDOM.render(<MyComponent />,document.getElementById('hello'));
</script>
</body>
</html>
运行结果如下:

image.png