react 组件 传参

React组件

根组件 App.js

function App(){
    return <div> ... </div>
}
export default App;

类组件

import React,{Componet} from 'react'

class App extends Componet {
    constructor(props){
        super(props)
    }
    state = {num:5}
   render(){
      return <div></div>
   }
}
export default App

区别 ：

1. 函数组件通常展示类组件通常做为容器
2. 类组件可以有state,管理数据用类组件函组件没有state
3. 函组件没有this 类组件 有this
4. 函数组件没有生命周期 类组件有生命周期

组件的定义

//导入组件
import Steper form 'src/components/Steper.js'
//使用  App.js中
<Steper></Steper>
//组件名称的首字母必须大写

组件传参

1. 父传子

<Steper  num={5}>

2. 默认

props.num

3. 子传父,执行父组件的传递过来的props回调函数

Steper.defaultProps = {
    num:1
}

5. 子传父:执行回调函数

//定义函数并把函数传递给子组件
updateSize = (n)=>this.setState({size:n})
<Steper updateSize={this.updateSize}>
//子组件执行props.updateSize()相当于执行父组件的updateSize方法

组件的设计

1. 容器组件
   一个页面,一个容器组件
   有state,处理state方法
   数据中心,与数据处理组中心
   类组件
2. 视图组件
   显示内容,一个视图组件
   只有props没有state
   函数组件

解构

dom 引用

1. 导入创建dom 引用的方法

import {createRef} from 'react'
var inp = createRef()
<input ref={inp}>
inp.current.value
inp.current 当前引用的dom节点

2. 创建dom引用

import {createRef} from 'react'

3. 引用

<input ref={inp}>

5. 获取值

inp.current.value
inp.current //当前引用的dom节点