好客租房48-组件的props（基本使用）

组件是封闭的 要接受外部数据应该通过props来实现

props的作用:接受传递给组件的数据

传递数据:给组件标签添加属性

接收数据:函数组件通过参数props接收数据 类组件通过this.props接受数据

函数组件

//导入react
 import React from 'react'
 import ReactDOM from 'react-dom'
  
 //导入组件
 // 约定1：类组件必须以大写字母开头
 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
 // 约定3:组件必须提供render方法
 // 约定4:render方法必须有返回值
  
 //函数组件
 const HelloWorld=props=>{
     console.log(props)
     return (
         <div>
             <h1>props:{props.name}</h1>
         </div>
     )
 }
     
  
 ReactDOM.render(<HelloWorld name="geyao" />, document.getElementById('root'))
 类组件//导入react
 import React from 'react'
 import ReactDOM from 'react-dom'
  
 //导入组件
 // 约定1：类组件必须以大写字母开头
 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
 // 约定3:组件必须提供render方法
 // 约定4:render方法必须有返回值
  
 class HelloWorld extends React.Component{
     render(){
         console.log(this.props)
         return (
             <div>
                 <h1>props:{this.props.name}</h1>
             </div>
         )
     }
 }
 //函数组件
 // const HelloWorld = (props) => {
 //     console.log(props)
 //     return (
 //         <div>
 //             <h1>props:{props.name}</h1>
 //         </div>
 //     )
 // }
  
 ReactDOM.render(<HelloWorld name="geyao" />, document.getElementById('root'))