React Native组件中如何访问props传递的对象属性

别担心呀！新手刚接触React Native遇到这种小问题太正常了，完全不用不好意思😉 你能打印出对象说明传值已经成功了，只是Text组件的取值方式需要调整一下，我给你一步步讲清楚：

核心思路 #

你需要从传入组件的**props（属性）**里拿到那个对象，然后直接访问它的name属性即可。这里要注意两个点：

• 确保正确接收组件的props
• 用安全的方式访问属性（避免对象未定义时报错）

具体代码示例 #

1. 函数组件写法（现在React Native最常用的方式） #

假设你的自定义组件叫UserCard，先看组件的实现：

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

// 接收props参数，里面包含你传入的对象
const UserCard = (props) => {
  // 你之前能打印成功的代码，确认对象存在
  console.log('传入的对象：', props.user);
  
  // 用可选链操作符?.访问name，避免对象未定义时出现报错
  return (
    <View>
      <Text>{props.user?.name}</Text>
    </View>
  );
};

export default UserCard;

然后在App.js里调用这个组件，传入对象：

import React from 'react';
import { View } from 'react-native';
import UserCard from './UserCard'; // 注意组件路径要正确

export default function App() {
  // 定义你要传入的对象
  const userInfo = {
    name: 'DauntlessRob',
    age: 28,
    hobby: 'coding'
  };

  return (
    <View>
      {/* 把对象通过user属性传给组件 */}
      <UserCard user={userInfo} />
    </View>
  );
}

2. 类组件写法（如果你的项目用了类组件） #

如果是类组件，只需要把props的访问方式改成this.props即可：

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

class UserCard extends Component {
  render() {
    console.log('传入的对象：', this.props.user);
    return (
      <View>
        <Text>{this.props.user?.name}</Text>
      </View>
    );
  }
}

export default UserCard;

额外提醒 #

• 检查拼写：确保你传入的对象里确实有name这个属性（别写成Name或者其他拼写错误），可以看控制台打印的对象结构确认
• 可选链?.的作用：如果你的对象可能在某些情况下是undefined（比如异步加载数据时），用?.可以避免程序崩溃，非常适合新手使用

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