为class创建的组件传递props参数并直接使用this.props来访问
一、为class创建的组件传递props参数并直接使用this.props来访问的实例
//class关键字创建组件
class Movie extends React.Component{
//render函数的作用，是渲染当前组件所对应的虚拟DOM元素
render(){
//return null
//在class关键字创建的组件中，如果想使用外接传递过来的props参数，不需要接收，直接通过this.props.***访问即可
return<div>
{/*注意：在class组件内部，this表示当前的实例对象 */}
这是Movie组件 – {this.props.name} – {this.props.age} – {this.props.gender}
</div>
}
}
const user = {
name:’zs’
age:’22’
gender:’男’
}
reactDOM.render(<div>
123
{/*<Hello name=(user,name) age=(user,age)></Hello> */}
{/* <Hello {…user}></Hello> */}
{/*这里的Movie标签，就是Movie类的一个实例对象 */}
<Movie>{…user}</Movie>
</div>,document.getElementById(‘app’))
// 1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'
//2. class 关键字创建组件
class Movie extends React.Component{
//render函数的作用，是 渲染 当前组件对应的 虚拟DOM元素
render(){
//return null 必须有返回值，没有返回值时，返回null
//在class 关键字创建的组件中，如果想使用 外界传递过来的 props 参数， 不需要接收，直接通过 this.props.***访问即可
return <div>
{/* 在class 组件内部，this 表示 当前组件的实例对象 */}
这是Movie组件
---{this.props.name}---{this.props.age}---{this.props.gender}
</div>
}
}
const user = {
name : 'zs',
age : 22,
gender:'男'
}
// 3. 调用 render 函数渲染
ReactDOM.render(<div>
123
{/* <Movie name={user.name} age={user.age} gender={user.gender}></Movie> */}
<Movie {...user}></Movie>
</div>, document.getElementById('app'))
