react同级组件互传

在 React 中，同级组件之间的数据传递并不是直接的，因为 React 推崇单向数据流的原则。但是，你可以通过共享一个共同的父组件来实现同级组件之间的数据传递。

一种常见的方法是将数据和相关的处理函数都定义在父组件中，然后通过 props 将它们传递给同级组件。这样，同级组件就可以通过调用父组件传递的方法来更新数据，从而实现组件之间的互传。

以下是一个简单的示例代码：

// 父组件
import React, { useState } from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const ParentComponent = () => {
  const [data, setData] = useState('');

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <ComponentA data={data} onDataChange={handleDataChange} />
      <ComponentB data={data} onDataChange={handleDataChange} />
    </div>
  );
};

export default ParentComponent;

// 组件 A
import React from 'react';

const ComponentA = ({ data, onDataChange }) => {
  const handleClick = () => {
    onDataChange('New data from Component A');
  };

  return (
    <div>
      <h2>Component A</h2>
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ComponentA;

// 组件 B
import React from 'react';

const ComponentB = ({ data, onDataChange }) => {
  const handleClick = () => {
    onDataChange('New data from Component B');
  };

  return (
    <div>
      <h2>Component B</h2>
      <button onClick={handleClick}>Update Data</button>
      <p>Data from Component A: {data}</p>
    </div>
  );
};

export default ComponentB;

在上面的示例中，父组件 `ParentComponent` 定义了一个 `data` 状态和 `handleDataChange` 函数，然后将它们通过 props 传递给 `ComponentA` 和 `ComponentB`。当点击组件 A 或组件 B 中的按钮时，会调用对应的 `handleDataChange` 函数来更新父组件的 `data` 状态，从而实现了同级组件之间的数据传递。

注意，这只是其中一种实现方式，你可以根据具体的需求选择合适的方法来实现同级组件之间的数据传递。