react子组件之间如何联动

子组件通过父组件传递数据

在React中，子组件之间的通信通常通过共同的父组件作为中介实现。父组件通过props向子组件传递数据或回调函数，子组件通过调用这些回调函数将数据传递回父组件，再由父组件更新其他子组件的props。

示例代码：

// 父组件
function Parent() {
  const [sharedData, setSharedData] = useState('');

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

  return (
    <div>
      <ChildA onDataChange={handleDataChange} />
      <ChildB data={sharedData} />
    </div>
  );
}

// 子组件A
function ChildA({ onDataChange }) {
  return <input onChange={(e) => onDataChange(e.target.value)} />;
}

// 子组件B
function ChildB({ data }) {
  return <p>Received: {data}</p>;
}

使用Context API共享状态

当组件层级较深时，可通过React的Context API跨层级共享状态。创建一个Context对象，父组件作为Provider提供数据，子组件通过useContext钩子或Consumer消费数据。

示例代码：

const DataContext = React.createContext();

function Parent() {
  const [sharedData, setSharedData] = useState('');

  return (
    <DataContext.Provider value={{ sharedData, setSharedData }}>
      <ChildA />
      <ChildB />
    </DataContext.Provider>
  );
}

function ChildA() {
  const { setSharedData } = useContext(DataContext);
  return <input onChange={(e) => setSharedData(e.target.value)} />;
}

function ChildB() {
  const { sharedData } = useContext(DataContext);
  return <p>Received: {sharedData}</p>;
}

使用状态管理库（如Redux）

对于大型应用，可使用Redux等状态管理库集中管理状态。子组件通过连接store获取数据或触发action，实现跨组件通信。

示例代码：

// Store配置
const store = createStore(reducer);

// 父组件
function Parent() {
  return (
    <Provider store={store}>
      <ChildA />
      <ChildB />
    </Provider>
  );
}

// 子组件A（通过dispatch更新数据）
function ChildA() {
  const dispatch = useDispatch();
  return <input onChange={(e) => dispatch(updateData(e.target.value))} />;
}

// 子组件B（通过selector获取数据）
function ChildB() {
  const sharedData = useSelector((state) => state.data);
  return <p>Received: {sharedData}</p>;
}

使用自定义事件或Pub/Sub模式

通过事件总线（如EventEmitter）或发布订阅模式，子组件可独立触发事件或监听事件，实现解耦通信。

示例代码：

const eventBus = new EventEmitter();

function ChildA() {
  return <input onChange={(e) => eventBus.emit('dataChange', e.target.value)} />;
}

function ChildB() {
  const [data, setData] = useState('');
  useEffect(() => {
    eventBus.on('dataChange', setData);
    return () => eventBus.off('dataChange', setData);
  }, []);
  return <p>Received: {data}</p>;
}

使用Refs暴露方法（适用于类组件）

父组件通过ref获取子组件实例，直接调用其方法或访问状态。适用于类组件的特定场景，但需谨慎使用以避免破坏React数据流。

示例代码：

class ChildA extends React.Component {
  updateData = (data) => {
    this.props.onDataChange(data);
  };
}

class Parent extends React.Component {
  childARef = React.createRef();

  handleClick = () => {
    this.childARef.current.updateData('New Data');
  };

  render() {
    return (
      <div>
        <ChildA ref={this.childARef} />
        <button onClick={this.handleClick}>Update</button>
      </div>
    );
  }
}