React中如何在无嵌套关系的独立组件间传递数据？

针对你这种两个同级独立组件的传值需求，React提供了多种靠谱的实现方式，我结合你的示例代码逐一说明：

1. 状态提升（最基础推荐方案） #

既然<Component1>和<Component2>都被包裹在<Test>父组件中，最直接的方式就是把共享状态提升到父组件，通过props传递回调和数据：

class Test extends Component{
  constructor(){
    super()
    this.state = {
      sharedData: null // 存储要传递的数据
    }
  }

  // 定义更新共享数据的回调函数，传给Component1
  updateSharedData = (data) => {
    this.setState({ sharedData: data })
  }

  render(){
    return(
      <div>
        <h1>Test</h1>
        {/* 给Component1传回调，让它能触发数据更新 */}
        <Component1 onDataReady={this.updateSharedData} />
        {/* 把共享数据传给Component2 */}
        <Component2 receivedData={this.state.sharedData} />
      </div>
    )
  }
}

// Component1的实现示例
class Component1 extends Component{
  handleTaskComplete = () => {
    // 完成自身任务后，调用父组件传来的回调传递数据
    const resultData = "Component1处理完成的数据";
    this.props.onDataReady(resultData);
  }

  render(){
    return <button onClick={this.handleTaskComplete}>完成任务并传值</button>
  }
}

// Component2的实现示例
class Component2 extends Component{
  render(){
    return <div>收到的数据：{this.props.receivedData || "暂无数据"}</div>
  }
}

这种方式完全符合React的单向数据流理念，代码清晰易维护，是处理同级组件传值的首选方案。

2. Context API（适合多组件共享场景） #

如果你的应用后续有更多组件需要共享这份数据，或者组件层级较深，使用Context API会更高效：

// 首先创建一个Context
const DataContext = React.createContext();

class Test extends Component{
  constructor(){
    super()
    this.state = {
      sharedData: null,
      updateSharedData: (data) => {
        this.setState({ sharedData: data })
      }
    }
  }

  render(){
    return(
      {/* 用Provider包裹子组件，提供共享数据和更新方法 */}
      <DataContext.Provider value={this.state}>
        <div>
          <h1>Test</h1>
          <Component1 />
          <Component2 />
        </div>
      </DataContext.Provider>
    )
  }
}

// Component1通过Context消费更新方法
class Component1 extends Component{
  static contextType = DataContext;

  handleTaskComplete = () => {
    const resultData = "Component1处理完成的数据";
    this.context.updateSharedData(resultData);
  }

  render(){
    return <button onClick={this.handleTaskComplete}>完成任务并传值</button>
  }
}

// Component2通过Context消费数据
class Component2 extends Component{
  static contextType = DataContext;

  render(){
    return <div>收到的数据：{this.context.sharedData || "暂无数据"}</div>
  }
}

Context可以让你跳过中间组件直接传递数据，适合全局或跨层级的状态共享。

3. 状态管理库（大型应用首选） #

如果你的应用比较复杂，有大量跨组件的状态交互，推荐使用专门的状态管理库，比如Redux、Zustand或Jotai。以Zustand为例，实现起来非常简洁：

// 创建全局状态store
import create from 'zustand';

const useDataStore = create((set) => ({
  sharedData: null,
  setSharedData: (data) => set({ sharedData: data })
}))

// Component1的实现
function Component1(){
  const setSharedData = useDataStore(state => state.setSharedData);

  const handleTaskComplete = () => {
    const resultData = "Component1处理完成的数据";
    setSharedData(resultData);
  }

  return <button onClick={handleTaskComplete}>完成任务并传值</button>
}

// Component2的实现
function Component2(){
  const sharedData = useDataStore(state => state.sharedData);

  return <div>收到的数据：{sharedData || "暂无数据"}</div>
}

// Test组件不需要做额外处理，直接渲染两个子组件即可
class Test extends Component{
  render(){
    return(
      <div>
        <h1>Test</h1>
        <Component1 />
        <Component2 />
      </div>
    )
  }
}

这类库可以让状态管理更规范化，尤其适合中大型React应用。

不推荐的方案：事件总线 #

虽然可以用自定义事件（比如window.dispatchEvent）实现组件间通信，但这种方式脱离了React的数据流体系，容易导致难以追踪的bug和内存泄漏，除非特殊情况，不建议使用。

内容的提问来源于stack exchange，提问作者José Carlos