09-react的组件传值 props

// 组件传值 props 接收传递过来的数据
import ReactDom from "react-dom"
import { Component } from "react"


// 类组件中使用函数组件 和 类组件 注意区分不同的组件使用不同方式接收数据
const Hellow = (props) => {
 console.log(props)
 return <h1>函数组件</h1>
}
class ComClass extends Component {
 render () {
  // 可以传递任意数据
  console.log(this.props)  // 父组件传递过来的数据 子组件使用 props 接收数据
  // 特点：单向的 ，即和 vue 中的子组件不能直接修改父组件的数据 
  // 父组件更新数据 子组件随后跟随更新数据 【单向数据流】 【自定向下的数据设计格式】
  return (<>
   <h1>类组件</h1>
  </>)
 }
}
class App extends Component {
 state = {
  count: 0
 }
 render () {
  return (<>
   {/* 函数组件和类组件传值都是使用name属性 */}
   <Hellow name="jac112k" age="12"></Hellow>
   <ComClass name="迪丽热巴" age="30" gender="女"></ComClass>
  </>)
 }
}


// 函数组件渲染到页面
ReactDom.render(<App />, document.querySelector("#root"))