React Native组件中使用类作为Props的问题求助

作为有iOS/Swift背景转React的开发者，我太懂这种从Swift类模型转到React Props的困惑了！咱们一步步拆解问题：

核心原因：React Props 本质是纯JavaScript对象 #

React组件接收的Props本质上是普通JS对象，而你用类创建的实例，和Swift里的类实例有本质区别：JS类实例带有原型链、可能包含方法等额外信息，React在渲染时更期望接收可直接解构的纯数据对象，而且Flow类型检查也可能因为类型不匹配而“静默”拦截（或者你没正确访问实例属性）。

步骤1：修正Flow类型定义方式 #

Flow里定义Props类型，不要用类，而是用type或interface来声明数据结构——这更符合React的范式，也和Swift里的struct/protocol定义模型的思路更贴近：

// 正确的Flow Props类型定义（代替类）
type MyComponentProps = {
  title: string,
  subtitle?: string, // 可选属性
};

// 组件中使用
class MyComponent extends React.Component<MyComponentProps> {
  render() {
    const { title, subtitle } = this.props;
    return (
      <View>
        <Text>{title}</Text>
        {subtitle && <Text>{subtitle}</Text>}
      </View>
    );
  }
}

步骤2：检查Props传递与访问方式 #

如果你坚持用类（不推荐），那你需要确保：

• 组件中正确访问类实例的属性，而不是直接渲染实例本身
• Flow类型定义要匹配类实例的结构

比如错误示例：

// 错误：直接渲染类实例，而不是它的属性
class MyPropsModel {
  title: string;
  constructor(title: string) {
    this.title = title;
  }
}

// 调用组件时
<MyComponent propsModel={new MyPropsModel("Hello")} />

// 组件中错误写法
render() {
  return <Text>{this.props.propsModel}</Text>; // 这里渲染的是类实例对象，不是字符串！
}

正确写法（如果一定要用类）：

// 组件中正确访问属性
render() {
  return <Text>{this.props.propsModel.title}</Text>; // 取实例的title属性
}

为什么直接传字符串能正常显示？ #

因为字符串是JS的基础类型，React可以直接渲染它；而类实例是对象，React无法直接渲染对象（除非你明确访问它的可渲染属性），所以会出现“没有内容显示”的情况——本质是你渲染了一个对象，而不是对象里的具体数据。

推荐最佳实践 #

1. 用Flow的type/interface定义Props结构，代替类模型
2. 传递纯数据对象作为Props，比如：

<MyComponent title="Hello" subtitle="React Native" />

3. 如果需要复用模型逻辑，用函数创建纯对象（类似Swift里的工厂方法），而不是类：

function createMyProps(title: string, subtitle?: string): MyComponentProps {
  return { title, subtitle };
}

// 使用
<MyComponent {...createMyProps("Hello", "React Native")} />

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