【React】中父组件传递方法到子组件

在一些场景中，我们可能需要在不同的地方传入不同的事件到子组件中去触发

• 父组件

{/* 这里的 onClickRight 必须和子组件里面定义的名字一样 */}
<MyNavBar title={'首页'} 
	rightText={'查看记录'} 
	onClickRight={handlerClickRight}/>

// 父组件中定义的触发的方法
function handlerClickRight() {
  history.push({
    pathname: '/other'
  })
}

• 子组件

import React from "react";
import {NavBar} from "react-vant";

export default function MyNavBar(props: {
  title?: string;
  rightText?: string;
  onClickRight?: () => void; // 定义好可能需要触发的函数
}) {

  return (
    <>
      <NavBar
        title={props.title}
        leftArrow={true}
        safeAreaInsetTop={true}
        border={false}
        placeholder={true}
        rightText={props.rightText}
        onClickRight={props.onClickRight}
      />
    </>
  )
}