七、组件的高级用法-组件的组合（children的用法）-高阶组件-封装组件

受控组件

简而言之，就是受到状态state控制的表单，表单的值改变则state值也改变，受控组件必须要搭配onchange方法，否则不能使用


class App extends Component{
  state={
    text:''
  }
  control=(e)=>{
    this.setState({text:e.target.value})
  }
  render(){
    const{text} = this.state;
    return <div>
      <input type="text" value={text} onChange={(e)=>{this.control(e)}}/>
      <p>{text}</p>
    </div>
  }
}
export default App

高阶组件

1 首先回顾一下什么是高阶函数

高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回。


function a( functionName ){
    functionName()
}
 
function b(){
    console.log('b')
}
 
 a(b)
 
// a为一个高阶函数

2 高阶组件

高阶组件是一个组件，它接收组件作为参数，并将组件作为输出返回


 
class Small extends Component{
  render(){
    return {this.props.text}
  }
}
 
//高阶组件
function High(Group){
  class Height extends Component{
    render(){
      return 
              <Group {...this.props}/>

}
}
return Height
}
//此时的small 经过进化已经不是原来的Small组件了
Small = High(Small);
class App extends Component{
state={
text:'高阶组件'
}
render(){
return
<Small text={text}/>

}

children

在组件传值时，不光可以传递变量，函数，也可以传递标签,通常我们使用两种方式传递标签: 1 通过属性传递标签,子组件接收时使用this.props


class Text extends Component{
  render(){
    return {this.props.hHtml}
  }
}
 
class App extends Component{
  render(){
    return 
        <Text hHtml={helloworld
}/>

2 将组件写成双标签，包住要传递的标签,子组件接收时使用this.props.children