Next.jsでpropsを使ってテキスト情報を渡す方法です。
test.jsでtitleという変数にテキスト情報を詰め込んで、test2.jsに渡します。
test.js
import React from 'react';
import Test2 from './test2';
function Test() {
return (
<div style={{ textAlign: 'center' }}>
<h1>Test1</h1>
<Test2 title="from test1 to test2"/>
</div>
);
}
export default Test;
title="from test1 to test2"
のところで設定。
test2.js
import React from 'react'
const Test2 = (props) => {
let title = props.title;
return (
<div>
<p>Test2</p>
<p>{title}</p>
</div>
)
}
export default Test2
結果
無事テキスト情報が渡りました！
ただ、残念ながら値情報は渡せないようです。
値を渡したい場合は、useContextを使用します。
https://qiita.com/Pirosiki_/items/c8648bca23d4dc72287d
参考にさせていただいたサイト様
↧