React中父组件如何获取子组件的值或方法_React

<Header ref='footer'></Header>

alert(this.refs.footer.state.sonmsg);//拿到子组件中state中的值
this.refs.footer.run();//拿到子组件中runn方法

<Header onRef={(ref) => { this.child = ref; }}></Header>

componentDidMount() {
     if (this.props.onRef) {
        this.props.onRef(this);
     }
}

alert(this.child.state.sonmsg);
this.child.run();

constructor(props) {
    super(props);
    // 方法3：创建用来保存ref标识的标签对象的容器
    this.pw = React.createRef()
}

<Header ref={this.pw}></Header>

alert(this.pw.current.state.sonmsg); 
this.pw.current.run()

import React, { useState } from 'react';
import Child from './component/child';
import './index.less';
 
const Home: React.FC = () => {
  const [parentCount, setParentCountt] = useState<number>(0);
 
  const getChildCount = (val: number) => {
    setParentCountt(val);
  };
 
  return (
    <div className="home-wrap">
      <p>我是父组件</p>
      <p>子组件传过来的数字：{parentCount}</p>
      <Child getCount={getChildCount} />
    </div>
  );
};
 
export default Home;

import React, { useState } from 'react';
 
type selfProps = {
  getCount: Function;
};
 
const Child: React.FC<selfProps> = (props) => {
  const { getCount } = props;
  const [count, setCount] = useState<number>(0);
 
  const addCount = (val: number) => {
    setCount(val);
    getCount(val);
  };
 
  return (
    <div className="child-wrap">
      <p>子组件</p>
      <p>数字：{count}</p>
      <button onClick={() => addCount(count + 1)}>数字递增</button>
    </div>
  );
};
 
export default Child;