Upgrade to Pro — share decks privately, control downloads, hide ads and more …

モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 2...

モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning

今日もエモい話はしません!

girigiribauer

February 01, 2020
Tweet

More Decks by girigiribauer

Other Decks in Programming

Transcript

  1. 奥様、createPortal ですよ! • React v16.0 Ͱೖͬͨϙʔλϧͱ͍͏ػೳ • `ReactDOM.createPortal(child, container)` •

    ୈ1Ҿ਺ͷදࣔཁૉΛɺୈ2Ҿ਺ͷ৔ॴʹදࣔ͢Δɺͱ͍͏ ·͞ʹઌͷ໰୊Λղܾ͢ΔͨΊͷ࢓૊Έ • Vue.js ʹ΋ `PortalVue` ͱ͍͏αʔυύʔςΟ੡ͷ ϓϥάΠϯ͕͋Δ
  2. 表示してどーん • ϦετΞΠςϜ `ul > li` ͕Ұ௨Γඳը͞Εͨޙʹ `<div class=“details” />`

    ͕ඳը͞Ε͍ͯΔ • createPortal Ͱ෼ׂͨ͠෦෼͚͕ͩ `body` ͷด͡λάͷ௚લʹग़ྗ͞ΕͯΔ • ελΠϧ͋ͯͯɺදࣔ੾Γସ͑ͱ͔ೖΕͨΒɺ ޙ͸Կͱ͔ͳΓͦ͏ʢͳͷͰུʣ
  3. 時間が余ったら自己紹介 • @girigiribauer ͹͏͋ʔ͞Μͱݺ͹ΕΔ͜ͱ͕ଟ͍Ͱ͢ • TwentyFour ޷͖Ͱɺ DVD ϘοΫε΋͋Δ͠ϝοηϯδϟʔόοά ΋3୅΄Ͳ࢖͍௵ͨ͠

    • ๻ͷ·ΘΓͰ೔ຊ൛ TwentyFour ͷ࿩୊͸ې۟ • ษڧձʹ͍ͭͯ • Nagoya Frontend User Group / ϑϩϯτΤϯυ΋͘΋͘ձ • ൃදܗࣜͷձΛଟ͘ͷਓʹἤ͍ͬͯΔ͕ɺͳ͔ͳ͔Ұॹʹ΍ͬͯ͘Εͳ͍໰୊ • ͓࢓ࣄʹ͍ͭͯ • ࡢ೥·ͰελʔτΞοϓͷ্ཱͪ͛ͱ͔ॾʑ΍ͬͯͨ • ·ͨϑϦʔϥϯεʹཱͪฦͬͨͷͰ͓ख఻͍ग़དྷͦ͏ͳͱ͜Ζ͋Ε͹ͥͻʂ