React-Bootstrap Modalを使用しましたが、なぜFooコンポーネントが2回レンダリングされるのか理解できません。React-Bootstrapモーダルの問題？
import { Modal, Button } from 'react-bootstrap';
const Foo = (props) => {
console.log(‘a’);
return(
<div>foo</div>
)
}
class Example extends Component {
render() {
return(
<Modal show={true}>
<Foo />
</Modal>
)
}
}
モーダルが入るときの状態です（前述のようにshowが最初にtrueに設定されていても同じように見えます）。 https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L202-L209をご覧ください。したがって、レンダリングが再度トリガされ、Fooが2回レンダリングされます。
編集：実際にonEntering関数が実際に呼び出された理由を理解するには、React-transition-groupに戻ってください。 https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js#L192。 componentDidMountでthis.updateStatusが呼び出され、最終的にonEnteringが呼び出されます。
内部コンポーネントが設定状態であるためです。あなたはあなたのコンポーネントの状態を設定していますし、Modalも内部的に状態を設定しているので、二重レンダーしています。 –
Bootstrap Modalでanimation = {false}を設定した場合、Fooコンポーネントは1回だけレンダリングされます。助けてくれてありがとう。 – George
2回実行するとどういう意味ですか？ –
それは本当ですか？ホットリロードを再構築または再実行しようとしましたか。コードを見ると、これは2回レンダリングできません。 – Fawaz