[ad_1]
製品の JSON ファイルがあり、詳細を div に入れたいと考えています。
2 番目の div (ウィンドウ) はデフォルトで非表示になっているため、{isShown && DIV_CONTENT} 状態が必要です。
ウィンドウの div を divStyle クラスの div と同じマップ関数に入れたいだけです。
ギット:
GitHub – folza1/react-modulzaro[^]
私が試したこと:
import "./App.css"; import cart from "./cart.jpg"; import { useState } from "react"; var data = require("./data.json"); function App() { const [isShown, setIsShown] = useState(false); const handleClick = (event) => { setIsShown(true); }; const handleClickClose = (event) => { setIsShown(false); }; return ( <> <h1>Termékek</h1> <div id="main"> {data.map((obj) => ( <div className="divStyle" key={obj.id}> <div id="thumbNail" style={{ backgroundImage: `url(${obj.thumbnail})` }} ></div> <div id="product"> <div id="title"> <p>{obj.title}</p> </div> <div id="price"> <p>${obj.price}</p> </div> <div id="cart" style={{ backgroundImage: `url(${cart})`, }} ></div> </div> <div id="reszletek"> <button id="buttonDetails" onClick={handleClick}> Details </button> </div> </div> {isShown && ( <div id="window" onClick={handleClickClose}> <div className="details"> Details like obj.title in curly braces </div> <div className="close">Close</div> </div> )} ))} </div> </> ); } export default App;
解決策 1
最も簡単な解決策は、return ステートメントに配置する変数を最初に作成することです。
つまり、現在の JSX を保持する変数を作成するということです。
次に、返すものに余分な div が含まれているかどうかを判断できます。
非常に簡単な例:
JavaScript
let mainDiv = <div>my stuff </div>; let extraDiv = <div> extra stuff</div>; let targetDivsForReturn = []; render(){ targetDivsForReturn.push(mainDiv); if (isShown){ targetDivsForReturn.push(extraDiv); } return (<> {targetDivsForReturn} </>) }
[ad_2]
コメント