1:創(chuàng)建nextjs 項目請參考官網(wǎng)
2:創(chuàng)建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:創(chuàng)建子組件并且?guī)?shù)
"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
