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
    

标签：console,log,父级,react,子级,props,组件,import,ref
来源： https://www.cnblogs.com/lixingqian/p/14952379.html