React Native中如何传递TouchableOpacity Props给父组件并解决类型报错

错误原因 #

你父组件的写法存在JSX语法错误：<ListComponent touchProps={disabled={true}} />里的disabled={true}不是正确的对象传递方式，JSX会把这段代码解析成传递了一个{ true: any }的无效对象（相当于把disabled当成表达式，而表达式结果是{true}这个不符合要求的结构），自然和TouchableOpacityProps类型完全不匹配，导致报错。

解决方案 #

1. 修正父组件传递方式
   把touchProps的传递写法改成标准的对象字面量形式：

<ListComponent touchProps={{ disabled: true }} />

这里外层的{}是JSX中嵌入JavaScript表达式的语法，内层的{}才是符合TouchableOpacityProps要求的对象，包含disabled属性和对应的值。

2. 确保子组件类型与属性传递正确
   如果用TypeScript，子组件要正确声明touchProps的类型：

import { TouchableOpacity, TouchableOpacityProps } from 'react-native';

type ListComponentProps = {
  touchProps?: TouchableOpacityProps; // 可选属性，根据需求调整
};

export const ListComponent = ({ touchProps }: ListComponentProps) => {
  return (
    <TouchableOpacity {...touchProps}>
      {/* 子组件内容 */}
    </TouchableOpacity>
  );
};

如果是JavaScript，只需确保在子组件中用扩展运算符...touchProps把属性传递给内部的TouchableOpacity即可。

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