如何在React的Grid组件中调用每个Tile组件的selectTile方法？

我有一个函数式组件：

function Tile(props: any) {

  const selectTile = (() => {
    ...
  })

  return (
    <div>
      ...
    </div>
  )
}

随后我创建了另一个包含多个Tile组件的函数式组件：

function Grid(props: any) {

  const selectAllTiles = (() => {
    
  })

  return (
    <div>
      <Tile></Tile>
      <Tile></Tile>
      <Tile></Tile>
    </div>
  )
}

我想知道：怎么在Grid组件的selectAllTiles函数里调用每个Tile组件的selectTile方法？有哪些可行的实现方式？

方案1：状态提升 + 受控组件（最推荐） #

把Tile的选中逻辑和状态统一放到Grid组件里管理，Tile变成受控组件，只负责接收状态和触发回调。这样selectAllTiles只需要批量更新状态就行，完全符合React单向数据流的设计思路。

修改后的代码：

// Tile改成受控组件，接收选中状态和点击回调
function Tile({ isSelected, onSelect }: { isSelected: boolean, onSelect: () => void }) {
  const selectTile = () => {
    // 这里可以保留Tile的内部处理逻辑
    ...
    // 触发父组件的回调
    onSelect();
  };

  return (
    <div onClick={selectTile} className={isSelected ? 'selected' : ''}>
      ...
    </div>
  );
}

// Grid组件管理所有Tile的选中状态
function Grid(props: any) {
  // 用数组存选中的Tile索引（假设每个Tile有唯一标识，这里用索引示例）
  const [selectedTiles, setSelectedTiles] = useState<number[]>([]);
  const tileCount = 3;

  const selectAllTiles = () => {
    // 全选就是把所有Tile的索引都加入数组
    setSelectedTiles(Array.from({ length: tileCount }, (_, idx) => idx));
  };

  // 单个Tile的选中/取消逻辑
  const handleTileToggle = (tileIndex: number) => {
    setSelectedTiles(prev => 
      prev.includes(tileIndex)
        ? prev.filter(idx => idx !== tileIndex)
        : [...prev, tileIndex]
    );
  };

  return (
    <div>
      <button onClick={selectAllTiles}>全选</button>
      {Array.from({ length: tileCount }, (_, idx) => (
        <Tile
          key={idx}
          isSelected={selectedTiles.includes(idx)}
          onSelect={() => handleTileToggle(idx)}
        />
      ))}
    </div>
  );
}

这种方式没有组件耦合，代码维护成本低，是React官方推荐的标准做法。

方案2：用Ref获取子组件实例（forwardRef + useImperativeHandle） #

如果确实需要直接调用Tile内部的selectTile方法，可以通过React的ref机制，让Tile主动暴露指定方法给父组件。不过这种方式会让父子组件产生耦合，非必要场景不推荐使用。

修改后的代码：

import { forwardRef, useImperativeHandle, useRef, useEffect } from 'react';

// 用forwardRef包裹Tile，通过useImperativeHandle暴露内部方法
const Tile = forwardRef((props: any, ref) => {
  const selectTile = () => {
    // Tile内部的选中逻辑
    ...
    console.log('这个Tile被选中了');
  };

  // 向父组件暴露selectTile方法
  useImperativeHandle(ref, () => ({
    selectTile
  }));

  return (
    <div>
      ...
    </div>
  );
});

function Grid(props: any) {
  // 创建一个ref数组，存每个Tile的实例引用
  const tileRefs = useRef<Array<{ selectTile: () => void }>>([]);
  const tileCount = 3;

  // 初始化ref数组，避免空引用报错
  useEffect(() => {
    tileRefs.current = Array.from({ length: tileCount }, () => ({ selectTile: () => {} }));
  }, [tileCount]);

  const selectAllTiles = () => {
    // 遍历所有Tile引用，调用selectTile
    tileRefs.current.forEach(tile => tile.selectTile());
  };

  return (
    <div>
      <button onClick={selectAllTiles}>全选</button>
      {Array.from({ length: tileCount }, (_, idx) => (
        <Tile
          key={idx}
          ref={el => tileRefs.current[idx] = el as { selectTile: () => void }}
        />
      ))}
    </div>
  );
}

只有当Tile的内部状态特别复杂、无法外移到Grid组件时，再考虑使用该方案。

方案3：发布订阅模式（事件总线） #

实现一个简单的事件总线，让每个Tile订阅“全选”事件，Grid组件触发该事件后，所有Tile会自动调用selectTile方法。这种方式完全解耦组件，但要注意组件卸载时取消订阅，避免内存泄漏。

示例代码：

// 自己实现一个轻量事件总线
const eventBus = {
  subscribers: new Map<string, Array<() => void>>(),
  // 订阅事件
  subscribe(eventName: string, callback: () => void) {
    if (!this.subscribers.has(eventName)) {
      this.subscribers.set(eventName, []);
    }
    this.subscribers.get(eventName)!.push(callback);
  },
  // 触发事件
  emit(eventName: string) {
    this.subscribers.get(eventName)?.forEach(cb => cb());
  },
  // 取消订阅
  unsubscribe(eventName: string, callback: () => void) {
    const subs = this.subscribers.get(eventName);
    if (subs) {
      this.subscribers.set(eventName, subs.filter(cb => cb !== callback));
    }
  }
};

function Tile(props: any) {
  const selectTile = () => {
    // Tile内部的选中逻辑
    ...
    console.log('Tile被选中');
  };

  // 组件挂载时订阅selectAll事件
  useEffect(() => {
    eventBus.subscribe('selectAll', selectTile);
    // 卸载时取消订阅，防止内存泄漏
    return () => eventBus.unsubscribe('selectAll', selectTile);
  }, []);

  return (
    <div>
      ...
    </div>
  );
}

function Grid(props: any) {
  const selectAllTiles = () => {
    // 触发selectAll事件，所有订阅的Tile都会执行selectTile
    eventBus.emit('selectAll');
  };

  return (
    <div>
      <button onClick={selectAllTiles}>全选</button>
      <Tile></Tile>
      <Tile></Tile>
      <Tile></Tile>
    </div>
  );
}

该方案适合组件层级很深、状态提升操作繁琐的场景，但全局事件过多时会增加维护成本，需谨慎使用。

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