3주 - 앱 전환

3976 단어 reacthookusestate

React Curve 3주 차에 오신 것을 환영합니다



개발자님 안녕하세요! 다시 만나 반갑습니다.

대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다.


앱 전환




이번 주에 우리는 반응에서 버튼을 클릭할 때 콘텐츠를 표시하거나 숨기는 토글 앱을 만들었습니다.

토글 구성 요소를 만들려면 우리는 다음을 수행해야 합니다.
  • 버튼 상태를 유지하는 상태를 만듭니다.
  • 버튼 상태가 표시되거나 표시되지 않습니다.
  • 버튼을 클릭하면 setShow 메소드가 실행됩니다.
  • setShow 메소드는 현재 표시 상태를 반대로 바꿉니다.
  • 표시 상태가 true인 경우 화면에

    를 표시하고 버튼에서 "Hide Welcome"을 토글합니다.

  • 표시 상태가 false인 경우 화면에 메시지를 표시하지 않고 버튼에서 "시작 표시"를 토글합니다
  • .

    암호




    import React, {useState} from 'react';
    
    const Toggle = () => {
        const [show, setShow] = useState(true);
    
        return (
            <div className="showHide">
                <h2>Toggle</h2>
                <div>
                    <button onClick={() => setShow(!show)}>
                        {show ? "Hide Welcome" : "Show Welcome"}
                    </button>
                    {show && <h2>Hi, How are you ? </h2>}
                </div>
            </div>
        );
    }
    
    export default Toggle;
    
    


    결론



    읽어 주셔서 감사합니다. 아래 스레드에서 어떤 기여도 환영합니다!

    Live Preview
    Source Code

    좋은 웹페이지 즐겨찾기