React中如何在父组件监听子组件触发的事件？

问题根源 #

你当前的代码里，Page组件给Parent传递的子元素是一个React.Fragment（<>...</>），而不是直接的Child组件列表。Parent里用Children.toArray(children)拿到的是这个Fragment节点，你给它绑定handleChange props，但Fragment本身不会把自身的props传递给它包裹的子元素，导致所有Child组件根本没收到handleChange方法，自然触发不了Parent里的回调。

修复方案 #

方案1：去掉多余的Fragment（最简单）

直接把Child组件作为Parent的直接子元素，不需要用Fragment包裹：

interface PageProps {}
const Page: FC<PageProps> = ({}) => {
  return (
      <div>
          <Parent>
              <Child />
              <Child />
              <Child />
              <Child />
          </Parent>
      </div>
  )
}
export default Page;

方案2：保留Fragment，递归处理子元素

如果业务上必须保留Fragment，需要修改Parent组件，递归遍历所有子元素，找到真正的Child组件再绑定handleChange：

import React, { FC, Children, cloneElement, isValidElement } from 'react';

interface IProps {
    children: React.ReactNode
}

const Parent: FC<IProps> = ({ children }) => {
    const handleChange = (value: string) => {
        console.log("VALUE: ", value)
    }

    // 递归处理所有子节点，穿透Fragment
    const processChildren = (nodes: React.ReactNode): React.ReactNode => {
        return Children.map(nodes, (node) => {
            if (!isValidElement(node)) return node;
            
            // 遇到Fragment就递归处理它的子元素
            if (node.type === React.Fragment) {
                return cloneElement(node, {}, processChildren(node.props.children));
            }
            
            // 给有效组件绑定handleChange
            return cloneElement(node, { handleChange });
        });
    }

    return (
        <div>
            {processChildren(children)}
        </div>
    )
}

export default Parent;

额外验证点 #

还要确保AnotherChild组件确实正确触发了onChange事件，比如如果它是输入框组件，要传递正确的value：

// 示例AnotherChild实现
const AnotherChild: FC<{ onChange: (value: string) => void }> = ({ onChange }) => {
  return <input type="text" onChange={(e) => onChange(e.target.value)} />;
}

内容的提问来源于stack exchange，提问作者Mohammed Sufyan Shaikh