react中父组件使用子组件方法

forwardRef ， useImperativeHandle 作用

forwardRef：将ref父类的ref作为参数传入函数式组件中，本身props只带有children这个参数，这样可以让子类转发父类的ref,当父类把ref挂在到子组件上时，子组件外部通过forwrardRef包裹，可以直接将父组件创建的ref挂在到子组件的某个dom元素上
useImperativeHandle ：在函数式组件中，用于定义暴露给父组件的ref方法。

当父子组件都为函数时，调用子组件方法

父组件

const EditableTable = () =>{

  const ref = useRef()

  const childrenData = ()=>{
    console.log(ref.current.innerFn);
  }

  return (
    <div>
        <button onClick={childrenData}>qurem</button>
        <Detils 
          ref={ref}
        />
      </div>
  )
}

export default EditableTable

子组件

import React, { useState ,forwardRef ,useImperativeHandle,} from 'react';
import {Form} from 'antd';

// @Form.create();

const Detils = forwardRef(({...props},ref) =>{
    const [data,setData] = useState([])

    const innerFn = () => {
        console.log('子组件');
    }

    useImperativeHandle(ref, () => ({
        innerFn,
      }), [innerFn]);


    return (
        <div>
            my  name  is  lilie
        </div>
    )
})


export default Detils

当父组件为class，子组件为函数组件时。父组件发生变化

父组件

import React, { Component} from 'react';
// import TabsTable from '../commpents/TabsTable'
import Detils from './detils';

class EditableTable extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             
        }
        this.ref = React.createRef({})
    }

    setDate = (value) =>{
        console.log(value);
    }

    childrenData = () =>{
      console.log(this.ref.current);
    }
    

    render() {
        return (
          <div>
            <button onClick={this.childrenData}>qurem</button>
            <Detils 
              setData={this.setDate}
              ref={this.ref} 
            />
          </div>
          
        )
    }
}

当父子组件都为class时

父组件

import React, { Component} from 'react';
// import TabsTable from '../commpents/TabsTable'
import Detils from './detils';

class EditableTable extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             
        }
        this.ref = React.createRef({})
    }

    setDate = (value) =>{
        console.log(value);
    }

    childrenData = () =>{
      console.log(this.Child.getFun);
    }
    
    bindRef = () =>{

    }

    render() {
        return (
          <div>
            <button onClick={this.childrenData}>qurem</button>
            <Detils 
              setData={this.setDate}
              onRef={c=>this.Child=c} 
            />
          </div>
          
        )
    }
}

子组件

class Detils extends Component {
    
    constructor(props){
        super(props)
    
        this.state = {
             
        }

        if(props.onRef){//如果父组件传来该方法 则调用方法将子组件this指针传过去
            props.onRef(this)
        }  
    }
    
    getFun = () =>{
        console.log('子组件');
    }

    render() {
        return (
            <div>
                my  name  is  lilie
            </div>
        )
    }
}


export default Detils

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 react 父级调用子级方法 react中父级props改变，更新子级state的多种方法 js子级窗口相互调用父级的方法 js,JQ-iframe父级与子级调用方法 Vue中父级框架页调用子级框架页面中的方法 iframe中如何获取子级和父级元素方法总结 React Hooks中父组件中调用子组件方法 React Hooks中父组件中调用子组件方法 React Hooks中父组件中调用子组件方法 react 子组件调用父组件中的方法