526互联

react高阶组件(HOC)个人理解

发布时间 2023-09-19 01:26:45作者: 快跑的乌龟

React中 子组件传递父组件的方法是：父组件通过给props传递一个接收方法，子组件通过 在 调用自身的方法 中 调用这个 父组件传递过来的方法将参数抛过去

例如：

class Test extends React.Component{
  state = {
    name:'张三'
  }
  handleClick = () => {
    this.props.getChildMsg(this.state.name)
  }
  render() {
    return (
      <div>
        这是子组件
        <button onClick={this.handleClick }>传递信息给父组件</button>
      </div>
    )
  }
}

export default class TestParent extends React.Component{
  getChildMsg= (data) => {
    console.log('子组件传递过来的信息:',data)
  }  render() {
    return (
      <div>
        这是test组件
        <Test getChildMsg={this.getChildMsg} ></Test>
      </div>
    )
  }
}

 

通过上面代码，会发现子传父，需要子组件去调用一下这个fun，若子组件在初始化的时候就自动调用了这个function呢

例如更改 父子组件：

//Test组件更改 render中返回：
  render() { (
　　　　return (this.props.getChildMsg(this.state.name)
    )
  }
//TestParent组件更改 render 中返回
  render() {
    return (
      <div>
        这是test组件
        <Test getChildMsg={ data => { data => { return ( <p> {data}</p> ) }} ></Test>
　　　　</div>
    )
  }

 

运行后不难发现我们可以直接获取到test组件中 name的值。若我们给test中写入一个 function 去更改其state中的值呢。

例如：在test组件中去获取当前鼠标的位置：

 state = {
    name:'张三',
    mousex:0,
    mousey:0
  }


 moveNouse = e => {
    this.setState({
      mousex:e.clientX,
      mousey:e.clientY
    })
  }
//在render中将整个state抛出
　　this.props.getChildMsg(this.state)
//在test组件创建前去获取当前鼠标的位置，更改state值
 componentDidMount(){
    window.addEventListener('mousemove',this.moveNouse)
  }
//组件销毁时解除绑定事件
 componentWillUnmount() {
    window.removeEventListener('mousemove',this.moveNouse)
  }


//父组件中
　　<Test getChildMsg={ mouse => { return ( <p>鼠标位置：{mouse.mousex} {mouse.mousey}</p> ) }} ></Test>
 

不难发现我们会实时获取到当前鼠标的位置

原理：在test组件创建时，我们给window绑定了鼠标移动事件，去更改 test组件中的 state值，这样，会导致组件更新，触发 render方法，调用父组件传递过来接收信息的方法（类似子传父）

***通过this.props.children进行更改***

//子组件 render方法
render() {
    return this.props.children(this.state)
}

//父组件
  <Test>
          { mouse => { return (<p>鼠标位置：{mouse.mousex} {mouse.mousey}</p>)}}
 </Test>

 这是通过props自带的children属性：<Child> 中间输入的 就可以通过props.children属性去获得 </Child>