React如何获取子组件的方法和数据

最新答案(React-hooks获取函数式子组件内容):

// 子组件
import React, {useImperativeHandle} from 'react';

const FunctionComponent = React.forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        click: handleClick,
        ref: ref.current,
    }));
    const handleClick =() => {
        console.log('hulala')
    };
    return (
        <div onClick={handleClick} ref={ref} style={{width: '100px'}}>
            hulala
        </div>
    );
});

export default FunctionComponent;

// 父组件
const App = () => {
    const Dd = useRef();
    useEffect(() => {
        console.log(Dd, 'Dd');
    }, []);
    return (
        <FunctionComponent ref={Dd}/>
    )
};

以下为很久以前的原答案,虽然好理解,但是不方便也不利于代码维护,不推荐下面的方法,还是用Ref吧.

先上代码:

        <OperateStudentForm
          onGetFunc={func => {
            this.handleOpenModal = func;
          }}
          onSearch={this.handleSearch}
        />
      </Card>
    );
  }
}

export default StudentManagement;

    componentDidMount() {
      this.props.onGetFunc(this.handleOpenModal);
    }

    handleOpenModal = data => {
      this.setState({
        visible: true,
        data,
      });
    };

1. 在子组件初始化的时候,将方法名传递给父父组件,父组件通过接受子组件传递过来的func,绑定到父组件的this上,这样就能随意调用子组件的方法了.
2. 注意,调用this.handleOpenModal尽量不要写在元素内联里面,最好用一个方法包一层,不然可能会出现调用不到这个函数的情况.
3. 不太喜欢网上的各种ref的方式调用,会使代码结构混乱,而且非常不React.
4. react-hooks时代应该不是这样玩的,应该会更优雅,还还没怎么研究

I believe your apartment is on fire