React Native中如何创建对象？实例化代码语法报错求修复

咱们一步一步来解决你遇到的问题，主要有两个核心错误需要修正：

1. 先修复自定义类文件（object.js） #

你当前的类写法不是有效的ES6类语法，而且名字object和JavaScript内置的Object构造函数重名，容易混淆，建议改成更有意义的名字（比如Person）。

正确的类写法（二选一） #

方式一：使用构造函数（兼容所有环境）

// object.js
// 这里不需要导入React的Component，因为这是普通JS类，不是React组件
export default class Person {
  constructor() {
    this.name = 'joe';
    this.age = 27;
    this.country = 'France';
  }
}

方式二：使用类字段语法（更简洁，React Native环境默认支持）

// object.js
export default class Person {
  name = 'joe';
  age = 27;
  country = 'France';
}

2. 修复MyComponent中的实例化错误 #

你在类的顶层直接写var man = new Object();是语法错误——ES6类的主体内只能定义方法、类字段或静态属性，不能直接放置变量声明语句。另外，你需要实例化自己的Person类，而不是内置的Object。

修正后的组件代码（二选一） #

方式一：在构造函数中初始化实例

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Person from './object.js'; // 导入改名后的类

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 在构造函数中实例化自定义类，挂载到组件实例上
    this.man = new Person();
  }

  render() {
    // 通过this访问组件实例上的man对象
    return (
      <View style={styles.container}>
        <Text>{this.man.age}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

方式二：使用类字段直接声明（更简洁）

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Person from './object.js';

export default class MyComponent extends Component {
  // 直接在类中声明实例属性，自动挂载到组件实例
  man = new Person();

  render() {
    return (
      <View style={styles.container}>
        <Text>{this.man.age}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

错误原因总结 #

• 你的自定义类没有遵循ES6类的语法规范，导致无法正确实例化；
• React组件类的顶层不能直接使用var/let/const声明变量，必须将实例化逻辑放在构造函数中，或者使用类字段语法；
• 你之前实例化的是JavaScript内置的Object，而不是自己定义的类，这也会导致无法获取到你定义的age属性。

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