父组件向子组件传值

父组件向子组件传值 也是通过 props 来传，在子组件中用 this.props.xx 接收父组件传来的值

function Fa() {
   const [num, setNum] = useState(0)
  return (
    <div>
      <h1>这是父组件</h1>
      <Son num={num}></Son>
    </div>);
}
export default Fa;

function Son(props) {
  return (
    <div>
      <h1>这是子组件</h1>
      <div>这里是父组件传来的值:{props.num}</div>
    </div>);
}
export default Son;

子组件向父组件传值

通过事件传递+callback

function Fa() {
  const [num, setNum] = useState(0)
  const [faData, setFaData] = useState({ name: 'Lucy' })
  const callBack = (data) => {
    setFaData(data)
  }
  return (
    <div>
      <h1>这是父组件</h1>
      <Son num={num} callBack={callBack}></Son>
      <div>这里接收子组件传的值:{faData?.name}</div>
    </div>);
}
export default Fa;
function Son(props) {
    const [sonData, setSonData] = useState({ name: 'lily' })
    const sendToFa = () => {
        props.callBack(sonData)
    }
    return (
        <div>
            <h1>这是子组件</h1>
            <div>这里是父组件传来的值:{props.num}</div>
            <Button onClick={sendToFa}>父向子传值</Button>
        </div>);
}
export default Son;

父组件调用子组件方法

使用props自定义onRef属性

//Fa
<div>
 <Button onClick={()=>this.childRef.search}></Button>
 <Son onRef={ref => this.childRef = ref}> </Son>
</div>
//Son
componentDidMount() {
//将子组件指向父组件的变量
     this.props.onRef && this.props.onRef(this)
};
search(){}