前提
ReactでJsonファイルを読み込んで、Jsonファイルにある「type」の値によって背景画像を切り替えたいと思っています。
背景画像は青いアイコン、赤いアイコン、オレンジのアイコンなど複数あるイメージです。
背景画像はコンポネートファイルに読み込んで、それをstyle属性に設定しようと考えています。
実現したいこと
Jsonファイルのある「type」の内容によって条件分岐でstyle属性に設定する背景画像を変更したい。
よく三項演算子などで、切り替えたりしますが条件が複数の場合の方法が知りたいです。
ファイル構成は下記です。
dummy.json
App.js
SecondBlock.js
jsonファイルを読み込んでSecondBlock.jsのコンポーネントで背景画像を切り替えたいと思っています。
該当のソースコード
JSONファイルあくまでダミーです。
json:dummy.json
1{ 2 "dummy": [ 3 4 { 5 "type":"red", 6 "tracknumber":7, 7 "time": "17:00", 8 "homenumber":6, 9 "congestion":[ 10 {"num":5,"icon":1,"cool":false}, 11 {"num":15,"icon":2,"cool":false}, 12 {"num":20,"icon":3,"cool":true}, 13 {"num":10,"icon":2,"cool":false}, 14 {"num":4,"icon":1,"cool":false}, 15 {"num":8,"icon":1,"cool":true}, 16 {"num":14,"icon":2,"cool":false}, 17 {"num":14,"icon":2,"cool":true}, 18 {"num":14,"icon":2,"cool":true}, 19 {"num":14,"icon":2,"cool":false}, 20 {"num":14,"icon":2,"cool":false} 21 ] 22 }, 23 { 24 "type":"blue", 25 "tracknumber":4, 26 "homenumber":7, 27 "congestion":[] 28 }, 29{ 30 "type":"orange", 31 "tracknumber":4, 32 "homenumber":7, 33 "congestion":[] 34 } 35 ] 36 }
`
javascript
1 2import React, { useEffect, useState } from "react"; 3import SecondBlcok from '../components/SecondBlock' 4 5const App= () => { 6 7 const [jsonData,setJsonData]=useState([]) 8 9 const fetchData = async () => { 10 try { 11 const res = await fetch(`${process.env.PUBLIC_URL}/dummy.json`); 12 const data = await res.json() 13 14 setJsonData(data.dummy) 15 16 } catch (error) { 17 console.log("error", error); 18 } 19 } 20 21 useEffect(() => { 22 fetchData () 23 }, []) 24 25 return ( 26 <div className='bg-[#5582c3]'> 27 <div className="mt-[11vw] p-[2vw]"> 28 29 {jsonData.map((data,idx)=>{ 30 const info = { 31 type:data.type, 32 tracknumber:data.tracknumber, 33 time:data.time, 34 homenumber:data.homenumber, 35 congestion:data.congestion 36 } 37 38 return( 39 <div key={idx}> 40 <SecondBlcok info={info}> 41 <ThirdBlock /> 42 </SecondBlcok> 43 </div> 44 ) 45 46 })} 47 48 </div> 49 </div> 50 51 ); 52}; 53 54export default App; 55
下記がコンポーネントとして読み込むファイルです。
javascript:SecondBlock
1 2import React from 'react' 3 4 const bgIconBlue = { 5 'background': `url(/images/bg_st-blue.jpg) 0 0 no-repeat`, 6 'backgroundSize': "contain" 7 } 8 9 const bgIconOrange = { 10 'background': `url(/images/bg_st-orange.jpg) 0 0 no-repeat`, 11 'backgroundSize': "contain" 12 } 13 14 const bgIconRed = { 15 'background': `url(/images/bg_st-red.jpg) 0 0 no-repeat`, 16 'backgroundSize': "contain" 17 } 18 19const SecondBlock = ({info,children}) => { 20 const {type,destination,tracknumber,time,homenumber}=info 21 22 23 return ( 24 <div className="text-center bg-white"> 25 <div style={} className="p-[2vw_2vw_0_8vw]"> 26 <p>ここは省略</p> 27 </div> 28 {/* 3nd accordino */} 29 {children} 30 </div> 31 ) 32} 33 34export default SecondBlock
試したこと
SecondBlock.jsのコンポーネントファイルにて。
まず条件分岐などなく、ふつうに設定すれば背景画像は表示されます。
下記、該当部分以外は省略しています。
javascript:SecondBlock.js
1 const bgIconBlue = { 2 'background': `url(/images/bg_st-blue.jpg) 0 0 no-repeat`, 3 'backgroundSize': "contain" 4 } 5 6 7return ( 8 <div className="text-center bg-white"> 9 <div style={bgIconBlue } className="p-[2vw_2vw_0_8vw]"> 10 <p>ここは省略</p> 11 </div> 12 {/* 3nd accordino */} 13 {children} 14 </div> 15 )
しかし、三項演算子だとエラーがでます。
javascript:SecondBlock.js
1 2import React from 'react' 3 4 const bgIconBlue = { 5 'background': `url(/images/bg_st-blue.jpg) 0 0 no-repeat`, 6 'backgroundSize': "contain" 7 } 8 9 const bgIconOrange = { 10 'background': `url(/images/bg_st-orange.jpg) 0 0 no-repeat`, 11 'backgroundSize': "contain" 12 } 13 14 const bgIconRed = { 15 'background': `url(/images/bg_st-red.jpg) 0 0 no-repeat`, 16 'backgroundSize': "contain" 17 } 18 19const SecondBlock = ({info,children}) => { 20 const {type,destination,tracknumber,time,homenumber}=info 21 22 23 return ( 24 <div className="text-center bg-white"> 25 <div style={`${type? bgIconBlue : bgIconRed }`} className="p-[2vw_2vw_0_8vw]"> 26 <p>ここは省略</p> 27 </div> 28 {/* 3nd accordino */} 29 {children} 30 </div> 31 ) 32} 33 34export default SecondBlock 35
上記のように「type」による三項演算子でやってみましたが、エラーがでますが、JSXにhtmlのようなスタイルの当て方がNGだと思います。
txt
1react-dom.development.js:2963 Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
上記のように3つ以上の条件で背景画像を変更したいのですがどうすればいいのでしょうか?
ご教授いただけると助かります。
よろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー