如何將 jQuery 整合到 ReactJS 中來建立手風琴而不犧牲 React 基於元件的架構？

jQuery 與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到需要使用它的JSX 檔案中：

   import $ from 'jquery';

匯入jQuery到需要使用它的JSX 檔案中：

步驟3：將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>
  );
};

轉換jQuery從手風琴程式碼轉換為ReactJS，您可以使用狀態管理來處理主體部分的可見性。以下是一個範例：

結論透過執行以下步驟，您可以在ReactJS 中利用jQuery 的強大功能並建立複雜的使用者介面，而不會影響元件-基於ReactJS 的架構。

以上是如何將 jQuery 整合到 ReactJS 中來建立手風琴而不犧牲 React 基於元件的架構？的詳細內容。更多資訊請關注PHP中文網其他相關文章！