React项目中jQuery失效，点击添加按钮无法生成列表求助

问题描述 #

在React的App.js中使用jQuery时，输入文本后点击Add按钮无法生成列表，怀疑jQuery未正常工作。尝试过导入jQuery、添加jQuery.noConflict()、调整script标签位置等方法，均无效。相同逻辑的代码在CodePen中可正常运行，作为编程新手，寻求解决帮助。

相关代码 #

App.js（原代码） #

import './App.css';
import $ from 'jquery'

function App() {
  return (
    <div className="App">
      <div id="listbox">
        <ul id="list"></ul>
      </div>
      <input id="inputTxt" />
      <button id="addBtn">Add</button>
      <script type="text/javascript" src='./script.js'>
        type="text/javascript" is important for jquery
      </script>
    </div>
  );
}

export default App;

script.js（原代码） #

jQuery.noConflict()
$(document).ready(function(){
    $("#addBtn").click(function () {
      var txt = $("#inputTxt").val();
      if (txt) {
        var listsize = $("#list").children().length;
        alert(listsize % 3);
        if (listsize % 3 == 0) {
          $("#list").append("<li class='red'>" + txt + "</li>");
        } else {
          $("#list").append("<li>" + txt + "</li>");
        }
      }
    });
  });

App.css #

.red{
  color: red;
}

问题原因 #

1. JSX中script标签不执行外部脚本：React的JSX语法不支持直接嵌入<script>标签加载外部脚本，原代码里的./script.js根本没被执行，事件绑定逻辑从未触发。
2. 事件绑定时机错误：即使脚本能加载，$(document).ready()仅在初始DOM加载完成时执行，但React组件是动态渲染的，#addBtn等元素可能在这之后才出现在DOM中，导致事件绑定失败。
3. jQuery与React的DOM管理冲突：React通过虚拟DOM维护DOM状态，直接用jQuery的append修改DOM会绕过React的状态管理，后续可能引发不可预期的问题。

解决方案 #

方案1：修复jQuery的使用方式（过渡方案） #

把事件绑定逻辑移到React组件的生命周期钩子中，确保组件渲染完成后再绑定事件：

修改后的App.js：

import './App.css';
import $ from 'jquery';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 定义点击事件处理函数
    const handleAdd = () => {
      const txt = $("#inputTxt").val();
      if (txt.trim()) {
        const listsize = $("#list").children().length;
        const liClass = listsize % 3 === 0 ? 'red' : '';
        $("#list").append(`<li class="${liClass}">${txt}</li>`);
        $("#inputTxt").val(''); // 清空输入框
      }
    };

    // 绑定点击事件
    $("#addBtn").click(handleAdd);

    // 组件卸载时解绑事件，避免内存泄漏
    return () => {
      $("#addBtn").off('click', handleAdd);
    };
  }, []); // 空依赖数组确保只执行一次

  return (
    <div className="App">
      <div id="listbox">
        <ul id="list"></ul>
      </div>
      <input id="inputTxt" />
      <button id="addBtn">Add</button>
    </div>
  );
}

export default App;

方案2：改用React原生写法（推荐） #

完全抛弃jQuery，使用React的状态管理来实现功能，更符合React的设计理念：

修改后的App.js：

import './App.css';
import { useState } from 'react';

function App() {
  // 管理输入框文本和列表项的状态
  const [inputText, setInputText] = useState('');
  const [listItems, setListItems] = useState([]);

  const handleAdd = () => {
    if (inputText.trim()) {
      // 更新列表项状态
      setListItems(prevItems => [...prevItems, inputText]);
      setInputText(''); // 清空输入框
    }
  };

  return (
    <div className="App">
      <div id="listbox">
        <ul id="list">
          {/* 遍历列表项渲染 */}
          {listItems.map((item, index) => (
            <li 
              key={index} 
              className={index % 3 === 0 ? 'red' : ''}
            >
              {item}
            </li>
          ))}
        </ul>
      </div>
      {/* 受控组件绑定状态 */}
      <input 
        id="inputTxt" 
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
      />
      <button id="addBtn" onClick={handleAdd}>Add</button>
    </div>
  );
}

export default App;

为什么推荐React原生写法 #

• 完全遵循React的状态管理机制，所有DOM更新由React控制，避免手动操作DOM带来的冲突和潜在bug。
• 代码逻辑清晰，状态变化可追踪，便于后续维护和调试。
• 无需引入jQuery，减少项目依赖，提升性能。

内容的提问来源于stack exchange，提问作者CJCJ