React Native中给高阶组件/包装组件传递子组件的实现问题

问题重现 #

尝试编写一个接收子组件的通用包裹组件，代码如下：

interface IComponentProps {
  onPress: () => void;
};

type IHybridProps = IComponentProps & React.Component;

const ParentComponent: React.FC<IHybridProps> = (props:IHybridProps) => {
 const {onPress = () => void,} = props;
 return (
         <View>
            <Pressable onPress={() => onPress() }> {props.children} </Pressable>
        </View>);
};

const Screen: React.FC = (props) => {
return ( 
    <ParentComponent> 
         <Text>Test Component</Text>
    </ParentComponent>);
};

运行后持续收到 text must be wrapped within a <Text> element 错误，尝试用<Text>包裹{props.children}虽能消除错误，但嵌套的子组件无法正常渲染。

错误原因分析 #

• Props类型定义错误：IHybridProps = IComponentProps & React.Component 完全无效，React.Component是组件类的类型，并非组件props的类型。要让组件支持子组件，应使用React.PropsWithChildren<IComponentProps>扩展props，自动包含children属性。
• 默认值语法错误：onPress = () => void 是非法语法，空函数默认值需写成onPress = () => {}。
• 多余纯文本节点：Pressable标签内{props.children}前后的空格属于纯文本，React Native中View、Pressable这类容器组件不能直接渲染纯文本，必须用<Text>包裹，这是报错的直接诱因。

修正后的代码 #

import React from 'react';
import { View, Pressable, Text } from 'react-native';

interface IComponentProps {
  onPress: () => void;
};

// 用PropsWithChildren自动包含children属性
type IHybridProps = React.PropsWithChildren<IComponentProps>;

const ParentComponent: React.FC<IHybridProps> = (props) => {
  // 修复默认值语法
  const { onPress = () => {}, children } = props;
  return (
    <View>
      {/* 移除多余空格，避免生成纯文本节点 */}
      <Pressable onPress={onPress}>{children}</Pressable>
    </View>
  );
};

const Screen: React.FC = () => {
  return (
    <ParentComponent onPress={() => console.log('Pressed!')}>
      <Text>Test Component</Text>
    </ParentComponent>
  );
};

关键说明 #

• 若实际场景中子组件可能包含纯文本（而非仅<Text>组件），可在Pressable内部嵌套<Text>，但需注意：Text组件仅能包含文本或其他Text组件，若子组件是View等非文本组件，不能用Text包裹，此时必须确保子组件本身是合法的容器/文本组件，避免直接传递纯文本。
• 通用包裹组件的核心是正确定义props类型，确保children属性被正确识别，同时避免在容器组件中直接渲染纯文本节点。

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