実現したいこと・前提
JSXが縦に長くなってしまうと見づらいので別けて書きたいです。
別けて書く為に関数化を試しました。
しかし、関数が複数回呼ばれてしまう問題が発生しました。
該当のソースコード
TypeScript
1import * as React from 'react'; 2import './style.css'; 3import 'bootstrap/dist/css/bootstrap.min.css'; 4 5import Button from 'react-bootstrap/Button'; 6import Modal from 'react-bootstrap/Modal'; 7 8export default function App() { 9 const [visible, setVisible] = React.useState(false); 10 const [text, setText] = React.useState('abc'); 11 12 const MyDialog = () => { 13 console.log('MyDialogが表示されました'); 14 15 return ( 16 <Modal show={visible} onHide={() => { setVisible(false); }}> 17 <Modal.Header closeButton> 18 <Modal.Title>タイトル</Modal.Title> 19 </Modal.Header> 20 21 <Modal.Body> 22 <input type="text" value={text} onChange={(e) => { setText(e.target.value); }} /> 23 </Modal.Body> 24 25 <Modal.Footer> 26 <Button variant="secondary">閉じる</Button> 27 <Button variant="primary">保存する</Button> 28 </Modal.Footer> 29 </Modal> 30 ); 31 }; 32 33 return ( 34 <div> 35 <MyDialog /> 36 37 <Button variant="primary" onClick={() => { setVisible(true); }}> 38 モーダルダイアログを表示する 39 </Button> 40 </div> 41 ); 42}
https://stackblitz.com/edit/react-ts-v6wluw?file=App.tsx
試したこと
関数化をやめて、関数内のコードをJSXにそのままコピペすると問題なく動作しました。
しかし、やりたい事としてはJSXを別けて書くことなので本末転倒です・・・。
補足情報(FW/ツールのバージョンなど)
- "@popperjs/core": "^2.11.6",
- "@types/react": "^18.0.8",
- "@types/react-dom": "^18.0.2",
- "bootstrap": "^5.2.3",
- "react": "^18.1.0",
- "react-bootstrap": "^2.7.0",
- "react-dom": "^18.1.0"
