react ts组件之间传递参数

1:创建nextjs 项目请参考官网

2:创建home组件

'use client'
import { useRouter } from 'next/navigation'

import TestComponent from "./parameterComponent";

export default function Home() {

  const router = useRouter()

  const buttonClickLogin =() => {
    router.push('/login');
  }


  const buttonClickSignUp =() => {
    router.push('/signUp')
  }

  const testClickFromHome =() => {

    console.log('testClickFromHome');
  }
  return (
    <>
      home
      <button onClick={buttonClickLogin}   >
        Go login
      </button><br/><br/>
      <button onClick={buttonClickSignUp}   >
        Go sign up
      </button>
      <br/><br/>

      <TestComponent
        userName='test name'
        testClick={testClickFromHome}
      />
    </>
  );
}

3:创建子组件并且带参数

"use client";

type requestParameter = {
    userName:string,
    testClick:()=>void,
 }

export default function TestComponent({userName,testClick}:requestParameter) {

  console.log("userName====",userName)
  return (
    <>
        component test
        <button onClick={testClick}>
            Test click=={userName}
        </button>
    </>
  );
}

访问项目地址http://127.0.0.1:3000/

image.png

github代码地址