何時以及如何將 jQuery 與 ReactJS 結合使用？

在ReactJS 中使用jQuery

簡介

ReactJS 是一個流行的JavaScript 框架，引發了關於冗餘的爭論Web 開發中的jQuery。雖然這兩種技術都有各自的優勢，但在某些情況下，在 ReactJS 中利用 jQuery 的功能可能是有益的。

場景：使用jQuery 建立Accordion

在此場景中，使用者希望使用jQuery 實現手風琴組件，其中涉及在單擊相應的頭部時展開或折疊主體。

jQuery 實作：

<code class="javascript">$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});</code>

ReactJS 等效

要在ReactJS 中實現類似的功能，我們可以實現我們使用狀態管理來切換每個主體的可見性。

狀態管理：
在 ReactJS 中，狀態是一個對象，它保存組件的當前值並確定其行為。我們可以如下定義手風琴的初始狀態：

<code class="javascript">const Accordion = () => {
  const [accordions, setAccordions] = useState([
    { id: 1, title: 'Head 1', content: 'Body 1', visible: false },
    // ...
  ]);
};
</code>

事件處理程序：
我們定義一個事件處理程序，用於處理head 元素上的單擊事件並更新

<code class="javascript">const handleClick = (index) => {
  // Clone the current state to avoid mutations
  const newAccordions = [...accordions];
  newAccordions[index].visible = !newAccordions[index].visible;
  setAccordions(newAccordions);
};</code>

渲染手風琴：

手風琴是使用地圖函數渲染的，該函數迭代項目並根據其可見有條件地顯示主體

<code class="javascript">render() {
  return (
    <div>
      {accordions.map((accordion, index) => (
        <AccordionItem key={accordion.id} title={accordion.title} content={accordion.content} visible={accordion.visible} handleClick={() => handleClick(index)} />
      ))}
    </div>
  );
}</code>

整合jQuery

雖然我們已經在沒有jQuery 的情況下實現了手風琴，但如果需要，仍然可以合併它。透過利用 npm，我們可以安裝 jQuery 並將其匯入到我們的 ReactJS 元件中。

<code class="javascript">import $ from 'jquery';
// ...

const Button = () => {
  $(document).ready(function(){
    // Use jQuery here
  });

  return (
    <button>...</button>
  );
};</code>

總之，雖然可以使用 ReactJS 的狀態管理和元件生命週期來複製 jQuery 功能，但在某些情況下可能會更困難。方便整合 jQuery 來完成特定任務。

以上是何時以及如何將 jQuery 與 ReactJS 結合使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！