React中不依赖父组件，子组件能否更新另一子组件状态？

方案1：自定义事件总线（Event Bus） #

创建一个独立的事件处理模块，让两个子组件通过它直接通信，完全不需要修改父组件。

步骤1：实现事件总线模块 #

新建eventBus.js文件，封装简单的订阅/触发逻辑：

// eventBus.js
const eventBus = {
  events: {},
  on(event, callback) {
    this.events[event] = this.events[event] || [];
    this.events[event].push(callback);
  },
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  },
  off(event, callback) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(cb => cb !== callback);
  }
};

export default eventBus;

步骤2：在SubstanceForm中订阅事件 #

接收历史搜索项并更新状态、执行搜索：

// SubstanceForm.jsx
import { useState, useEffect } from 'react';
import eventBus from './eventBus';

function SubstanceForm() {
  const [newSubstance, setNewSubstance] = useState('');

  useEffect(() => {
    // 订阅填充搜索框的事件
    const handleFillSearch = (substance) => {
      setNewSubstance(substance);
      // 调用你的搜索逻辑
      handleSearch(substance);
    };

    eventBus.on('fillSearch', handleFillSearch);

    // 组件卸载时取消订阅，避免内存泄漏
    return () => eventBus.off('fillSearch', handleFillSearch);
  }, []);

  const handleSearch = (substance) => {
    // 你的搜索实现（比如调用API、更新历史记录等）
    console.log('执行搜索:', substance);
  };

  // 原有表单提交逻辑
  const handleSubmit = (e) => {
    e.preventDefault();
    if (newSubstance.trim()) {
      handleSearch(newSubstance);
      // 保存到LocalStorage
      const history = JSON.parse(localStorage.getItem('searchHistory')) || [];
      localStorage.setItem('searchHistory', JSON.stringify([...history, newSubstance]));
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={newSubstance}
        onChange={(e) => setNewSubstance(e.target.value)}
        placeholder="搜索物质名称"
      />
      <button type="submit">搜索</button>
    </form>
  );
}

export default SubstanceForm;

步骤3：在PreviousSearches中触发事件 #

点击历史项时，通过事件总线传递数据：

// PreviousSearches.jsx
import { useState, useEffect } from 'react';
import eventBus from './eventBus';

function PreviousSearches() {
  const [history, setHistory] = useState([]);

  useEffect(() => {
    // 从LocalStorage加载历史记录
    const savedHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];
    setHistory(savedHistory);
  }, []);

  const handleHistoryClick = (substance) => {
    // 触发填充搜索框的事件
    eventBus.emit('fillSearch', substance);
  };

  return (
    <div>
      <h3>历史搜索</h3>
      <ul>
        {history.map((item, index) => (
          <li key={index} onClick={() => handleHistoryClick(item)} style={{ cursor: 'pointer', color: '#165DFF' }}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PreviousSearches;

方案2：监听LocalStorage变化 #

利用浏览器的storage事件和自定义事件，通过LocalStorage传递触发信号，无需修改父组件。

步骤1：修改PreviousSearches触发信号 #

点击历史项时，触发自定义事件并写入LocalStorage（兼容跨标签页场景）：

// PreviousSearches.jsx
import { useState, useEffect } from 'react';

function PreviousSearches() {
  const [history, setHistory] = useState([]);

  useEffect(() => {
    const savedHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];
    setHistory(savedHistory);
  }, []);

  const handleHistoryClick = (substance) => {
    // 触发当前标签页的自定义事件
    window.dispatchEvent(new CustomEvent('fillSearch', { detail: substance }));
    // 写入LocalStorage，兼容其他标签页
    localStorage.setItem('fillSearchTrigger', JSON.stringify(substance));
  };

  return (
    <div>
      <h3>历史搜索</h3>
      <ul>
        {history.map((item, index) => (
          <li key={index} onClick={() => handleHistoryClick(item)} style={{ cursor: 'pointer', color: '#165DFF' }}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PreviousSearches;

步骤2：在SubstanceForm中监听信号 #

接收信号并更新状态、执行搜索：

// SubstanceForm.jsx
import { useState, useEffect } from 'react';

function SubstanceForm() {
  const [newSubstance, setNewSubstance] = useState('');

  useEffect(() => {
    // 处理当前标签页的自定义事件
    const handleLocalFill = (e) => {
      const substance = e.detail;
      setNewSubstance(substance);
      handleSearch(substance);
    };

    // 处理跨标签页的storage事件
    const handleStorageFill = (e) => {
      if (e.key === 'fillSearchTrigger') {
        const substance = JSON.parse(e.newValue);
        setNewSubstance(substance);
        handleSearch(substance);
        // 处理后清除触发信号
        localStorage.removeItem('fillSearchTrigger');
      }
    };

    window.addEventListener('fillSearch', handleLocalFill);
    window.addEventListener('storage', handleStorageFill);

    return () => {
      window.removeEventListener('fillSearch', handleLocalFill);
      window.removeEventListener('storage', handleStorageFill);
    };
  }, []);

  const handleSearch = (substance) => {
    console.log('执行搜索:', substance);
  };

  // 原有表单提交逻辑...

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={newSubstance}
        onChange={(e) => setNewSubstance(e.target.value)}
        placeholder="搜索物质名称"
      />
      <button type="submit">搜索</button>
    </form>
  );
}

export default SubstanceForm;

方案3：全局变量挂载方法（不推荐） #

将SubstanceForm的状态更新方法挂载到window对象，PreviousSearches直接调用。这种方式简单但容易造成全局污染，仅适合小型项目。

步骤1：在SubstanceForm中挂载全局方法 #

// SubstanceForm.jsx
import { useState, useEffect } from 'react';

function SubstanceForm() {
  const [newSubstance, setNewSubstance] = useState('');

  useEffect(() => {
    // 挂载全局方法
    window.fillSearch = (substance) => {
      setNewSubstance(substance);
      handleSearch(substance);
    };

    // 组件卸载时清除全局方法
    return () => delete window.fillSearch;
  }, []);

  const handleSearch = (substance) => {
    console.log('执行搜索:', substance);
  };

  // 原有表单逻辑...
}

步骤2：在PreviousSearches中调用全局方法 #

// PreviousSearches.jsx
const handleHistoryClick = (substance) => {
  if (window.fillSearch) {
    window.fillSearch(substance);
  }
};

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