如何检查React组件子元素是否存在嵌套子元素以正确传递props

你当前的实现仅能处理顶层子元素，无法作用于嵌套层级，也无法保证props给到正确的目标元素，可通过递归遍历所有子元素层级，结合目标元素匹配规则实现需求，具体实现如下：

实现步骤 #

1. 首先明确目标元素匹配规则
   你需要先确定要注入onBlur、inputRef的目标元素特征，比如是原生<input>标签、指定自定义组件、或是存在特定props的元素，避免给无关元素注入无效props。

2. 编写递归遍历子元素的工具函数

import React from 'react';

// 入参为待处理的子元素集合
const injectPropsToTarget = (children) => {
  return React.Children.map(children, (child) => {
    // 非有效React元素直接返回
    if (!React.isValidElement(child)) return child;

    // 目标元素匹配规则，可根据你的实际需求修改
    const isTarget = 
      // 匹配原生input标签
      child.type === 'input'
      // 匹配自定义组件示例：child.type.displayName === 'SearchInput'
      // 匹配带特定props的元素示例：'value' in child.props

    const extraProps = isTarget ? {
      onBlur: onFocusChange,
      inputRef: searchInput
    } : {};

    // 先递归处理当前元素的嵌套子元素，再克隆当前元素并注入props
    return React.cloneElement(
      child,
      extraProps,
      injectPropsToTarget(child.props.children)
    );
  })
}

3. 替换原有逻辑

const component = () => {
  const child = componentProp(value, setValue);
  return injectPropsToTarget(child);
};

注意事项 #

• 必须设置合理的目标元素匹配规则，避免给非目标元素注入多余props导致运行报错
• 如果目标元素是自定义组件，需要确保该组件会将接收到的inputRef、onBlur透传给内部真实的输入元素，否则props依然无法生效
• 递归逻辑会自动处理任意层级的嵌套子元素，不需要额外判断子元素是否存在嵌套

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