React의 구성 요소 기반 아키텍처를 희생하지 않고 jQuery를 ReactJS에 통합하여 아코디언을 구축하려면 어떻게 해야 합니까?

Query와 ReactJS의 인터페이스: 종합 가이드

ReactJS 초보자로서 jQuery의 다양성에서 ReactJS의 구성 요소화된 접근 방식으로 전환하는 데 어려움을 겪을 수 있습니다. . 이 글은 특히 아코디언을 생성하는 맥락에서 jQuery를 ReactJS에 통합하는 과정을 안내합니다.

1단계: 아코디언 이해

HTML 형식 에서 아코디언은 여러 섹션으로 구성되며 각 섹션에는 헤더와 축소 가능한 본문이 포함되어 있습니다. jQuery를 사용하면 이벤트 리스너를 사용하여 이러한 요소를 동적으로 조작할 수 있습니다.

2단계: jQuery를 ReactJS에 통합

jQuery를 ReactJS에 통합하려면 다음 단계를 따르세요.

1. 명령줄을 사용하여 프로젝트 디렉터리로 이동합니다.

2. 다음 명령과 함께 npm을 사용하여 jQuery를 설치합니다.

   npm install jquery --save
   npm i --save-dev @types/jquery

3. jQuery 가져오기

   import $ from 'jquery';

3단계: jQuery 코드를 ReactJS로 변환

jQuery를 변환하려면 ReactJS에 대한 아코디언 코드를 사용하면 상태 관리를 사용하여 본문 섹션의 가시성을 처리할 수 있습니다. 예는 다음과 같습니다.

import React, { useState } from 'react';

const Accordion = () => {
  const [activeSection, setActiveSection] = useState(null);

  const handleHeadClick = (e) => {
    const section = e.target.parentElement;
    if (section === activeSection) {
      setActiveSection(null);
    } else {
      setActiveSection(section);
    }
  };

  return (
    <div className="accor">
      {sections.map((section) => (
        <div key={section.id} className="section">
          <div className="head" onClick={handleHeadClick}>{section.header}</div>
          <div className={`body ${activeSection === section ? '' : 'hide'}`}>{section.body}</div>
        </div>
      ))}
    </div>
  );
};

결론

이 단계를 따르면 ReactJS 내에서 jQuery의 기능을 활용하고 구성 요소를 손상시키지 않고 복잡한 사용자 인터페이스를 만들 수 있습니다. ReactJS 기반 아키텍처입니다.

위 내용은 React의 구성 요소 기반 아키텍처를 희생하지 않고 jQuery를 ReactJS에 통합하여 아코디언을 구축하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!