反応:機能部品におけるモードの使用

今、モーダルは私の新しい強迫観念です.
この例では、モーダルが私の好きなアニメーションのリストを表示するために作成されます!
まず、ボタンを返す単純な機能コンポーネントを次のように作成します.

import React from 'react';

function ModalInFunctionalComponent (){

    return(
        <>
           <button>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent

useStateは、モーダルが開いたり閉じたりするためのブール値を設定するためにインポートする必要があります.当初、modalIsOpenはfalseに設定されている.
したがって、onClick属性はモーダルを開くためにボタンにセットされて、一旦押されると、setModalIsOpenToTrueの機能がmodalIsOpenにtrueにセットするために呼び出されます.

import React, {useState} from 'react';

function ModalInFunctionalComponent (){

    const [modalIsOpen, setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    return(
        <>
           <button onClick={setModalIsOpenToTrue}>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent

次に、モーダルを使用して、モーダルをインストールします.
モーダルコンポーネントはnpm install react-modal属性を持つ機能コンポーネントで返されます.また、モードを閉じるためにimport Modal from react-modalを呼び出すモーダルコンポーネントの中に別のボタンが追加されます.
最後に、私は私の好きなアニメーションのリストを返す別のコンポーネントを作成し、インポートし、モーダルコンポーネント内で返されます!

import React from 'react'

function AnimeList () {

        return (
            <>
            <ul>
                 <h1>One Piece</h1>
                 <h1>Fullmetal Alchemist: Brotherhood</h1>
                 <h1>Naruto</h1>
                 <h1>Bleach</h1>
                 <h1>Haikyu!!</h1>
                 <h1>Kuroko no Basketball</h1>
                 <h1>My hero academia</h1>
                 <h1>One punch man</h1>   
            </ul>     
            </>
        )

}

export default AnimeList

import React, {useState} from 'react';
import Modal from 'react-modal';
import AnimeList from './Anime';


function ModalInFunctionalComponent (){

    const [modalIsOpen,setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    const setModalIsOpenToFalse =()=>{
        setModalIsOpen(false)
    }

    return(
        <>
            <button onClick={setModalIsOpenToTrue}>Click to Open Modal</button>

            <Modal isOpen={modalIsOpen}>
                <button onClick={setModalIsOpenToFalse}>x</button>
                <AnimeList/>
            </Modal>
        </>
    )
}
export default ModalInFunctionalComponent;

それだ!あなたはモードが動作する必要があります!


さて、スタイリングのために

const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)',
      backgroundColor       : '#F0AA89'      
    }
};

モーダルコンポーネントはisOpenの値を持つsetModalIsOpenToFalse属性を持ちます.styleの属性をcustomStylesにonRequestCloseに設定することもできます.これは、ユーザーが“X”ボタンだけでなく、モーダルコンポーネントの外側の任意の場所をクリックしたときにモードを閉じます.

 <Modal isOpen={modalIsOpen} style={customStyles} onRequestClose={()=> setModalIsOpen(false)}>
       <button onClick={setModalIsOpenToFalse}>x</button>
       <AnimeList/>
 </Modal>

最後まで作ってくれてありがとう