前提
特定のページで画像の表示と非表示を切り分けたいです。
自力で解決できませんでしたので、ご教授頂ければと思います。
実現したいこと
imageOnの値(boolean)にtrueが指定されている時に、画像を表示したいです。
発生している問題・エラーメッセージ
falseを指定しても、trueを指定しても画像がon/offしない。
(vscode上では、赤い波線になっています。)
該当のソースコード
typescript
1import Hero from 'components/hero' 2 3export default function About() { 4 return ( 5 <Hero 6 title="About" 7 subtitle="About development activities" 8 imageOn = true// ここで切り替えたい 9 /> 10 ) 11}
typescript
1 2interface Props { 3 title: string 4 subtitle: string 5 imageOn: boolean 6} 7 8export default function Hero({title, subtitle, imageOn}: Props) { 9 return ( 10 <div> 11 <h1>{title}</h1> 12 <p>{subtitle}</p> 13 {imageOn && <figure>[画像]</figure>} 14 </div> 15 ) 16}
試したこと
色々なサイトを見てみましたが、自力で解決できませんでした。
補足情報(FW/ツールのバージョンなど)
"dependencies": {
"@next/font": "13.0.7",
"@types/node": "18.11.17",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.9",
"eslint": "8.30.0",
"eslint-config-next": "13.0.7",
"next": "13.0.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.9.4"
}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/21 02:35