React（含Next.js场景）如何调用另一个组件中定义的const函数

核心是通过 React 组件的 props 透传回调函数 实现跨组件调用，按以下两步修改即可：

• 第一步：修改 index.js，给 Welcome 组件传递自定义 props

import Welcome from './welcome'

export default function Home() {
  const hideWelcome = () => {
    // do sth here
  };

  // 把 hideWelcome 作为 props 传给子组件
  return (<Welcome onHide={hideWelcome} />)
}

• 第二步：修改 welcome.js，接收 props 并绑定到点击事件

// 方式1：直接取props对象属性
export default function Welcome(props) {
  return(
    <Button onClick={props.onHide} />
  )
}

// 方式2：解构props（更常用的写法）
export default function Welcome({ onHide }) {
  return(
    <Button onClick={onHide} />
  )
}

注：传递的 props 属性名可以自定义，只要父子组件两端使用的名称一致即可，示例中用onHide是 React 回调 prop 的常用命名规范。

内容的提问来源于stack exchange，提问作者samuel ng