이 튜토리얼은 RACT 스톱워치를 확장하여 랩 타이밍 기능을 포함하여 심각한 시간 유지 응용 프로그램의 중요한 기능입니다. 우리는 반응 상태 관리, 어레이 및 조건부 렌더링에 대한 지식을 활용하여이를 달성 할 것입니다. 이것은 건물의 파트 3입니다.
반응 스톱워치에 랩 로깅을 추가하는 것에 대한 자주 묻는 질문 (FAQ)
반응 스톱워치에 랩 로깅을 추가하는 방법?
랩 로깅을 추가하려면 "랩"버튼으로 트리거 된 기능이 필요합니다. 이 함수는 스톱워치의 현재 시간을 캡처하여 배열에 추가합니다. 후크는이 배열을 관리합니다
랩 타임 표시
배열에 매핑하여 랩 타임을 표시하여 각 랩의 구성 요소를 렌더링합니다.
형식 랩 타임
헬퍼 기능을 사용하여 밀리 초를 분, 초 및 밀리 초로 변환하여 가독성 향상 :
랩 타임을 재설정
랩 타임을 재설정하려면 배열을 지우는 것이 포함됩니다
정확한 랩 타임 보장
정확도가 가장 중요합니다. 랩 로깅 함수는 현재 시간을 캡처 할 때 지연을 피하기 위해 동기식이어야합니다.
일시 정지 기능 추가
스톱워치가 실행 중인지 추적하기 위해 상태 변수를 소개합니다.
일시 정지에서 다시 시작합니다
일시 중지시 현재 시간을 보존하십시오. 전체 재설정 중에 만 재설정하십시오
랩 기능 구현 (이미 위에서 덮여 있음)
새로 고침을 가로 질러 랩 타임을 지속시킵니다
useState
를 사용하여 랩 타임을 저장하여 페이지 새로 고침 후에도 지속성을 보장합니다.
응답 디자인 CSS 미디어 쿼리를 사용하여 다양한 뷰포트 크기에 대한 레이아웃과 크기를 조정하십시오.
위 내용은 시청 : React Stopwatch에 랩 로거를 추가합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!