React.cloneElement覆盖嵌套View中TextInput的Props失效问题

问题核心是你用React.cloneElement给外层View添加了value、onChangeText等props，但这些属性只会作用在根组件（外层View）上，嵌套在里面的TextInput根本拿不到这些配置，自然无法触发输入回调。

下面提供两种可行的解决方案：

方案一：将footerInput改为函数组件（推荐） #

让外部传入的footerInput是一个接收TextInput props的函数，内部自行把props传递给嵌套的TextInput：

// 外部定义footerInput时
footerInput = (inputProps) => (
  <View>
    <View style={{backgroundColor: "black", height:1, width:"90%", alignSelf:"center"}} />
    <TextInput
      style={styles.chatInputStyle}
      {...inputProps} // 把外部传入的props透传给TextInput
    />
    <View style={{backgroundColor: "black", height:1, width:"90%", alignSelf:"center"}} />
  </View>
)

// npm包中使用时
{footerInput && (
  <View style={{marginTop:8}}>
    {footerInput({
      value: value,
      onSubmitEditing: handleSubmitEditing,
      onChangeText: text => onChangeValue(text)
    })}
  </View>
)}

这种方式逻辑清晰，可控性强，不会出现意外的props注入问题。

方案二：递归查找并注入props到TextInput #

如果无法修改外部传入的footerInput结构，可以写一个递归函数，遍历组件树找到所有TextInput，给它们添加需要的props：

import React from 'react';
import { TextInput } from 'react-native';

// 递归遍历组件树，给TextInput注入props
const injectPropsToTextInput = (element, injectProps) => {
  if (!React.isValidElement(element)) return element;

  // 命中TextInput，克隆并添加props
  if (element.type === TextInput) {
    return React.cloneElement(element, injectProps);
  }

  // 处理容器组件的子元素
  const { children } = element.props;
  let newChildren = children;

  if (children) {
    newChildren = Array.isArray(children)
      ? children.map(child => injectPropsToTextInput(child, injectProps))
      : injectPropsToTextInput(children, injectProps);
  }

  return React.cloneElement(element, {}, newChildren);
}

// npm包中使用
{footerInput && (
  <View style={{marginTop:8}}>
    {injectPropsToTextInput(footerInput, {
      value: value,
      onSubmitEditing: handleSubmitEditing,
      onChangeText: text => onChangeValue(text)
    })}
  </View>
)}

注意：如果组件树中有多个TextInput，这个方法会给所有TextInput都注入props，需要根据实际场景调整逻辑（比如通过特定标识筛选目标TextInput）。

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