props传递对象_React 使用 Props 传递数据

最新推荐文章于 2025-06-02 09:02:39 发布

weixin_39805087

最新推荐文章于 2025-06-02 09:02:39 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： props传递对象

本文链接：https://blog.youkuaiyun.com/weixin_39805087/article/details/112455060

本文介绍了如何在React中通过props传递组件属性，将其比作函数参数，详细讲解了props的作用、如何在组件间传递值以及key的重要性。通过实例演示了如何在无状态函数组件中使用props。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们可以认为向组件传递属性就像向函数传递参数，就像我们可以访问传入普通 JavaScript 函数的参数，我们也可以使用 this.props （或者在无状态函数式组件中使用props）访问组件的属性，所有属性都存储在这个对象上，props是传递给 React 组件的任何输入内容。

传统方式

function fetchUser(username) {
  // ajax call
}

fetchUser('Johnson')

React component

我们向组件添加自定义属性，并给它一个值

class User extends React.Component {
  render(){
    return (
      <p> username: {this.props.username} </p>
      <p> Is Friend?: {this.props.friend} </p>
    )
  }
}

// 向UI 显示一个用户
<user username='Johnson' friend={true} />

向组件传值

// 向<Clock /> 组件传入currentTime 属性
<Clock currentTime={new Date().getTime()} />

// 传多个属性
<Clock time={Date.now()} zone='MST' />

访问组件的值

<Clock currentTime='3：14pm' />

//... 

this.props.currentTime

key

必须声明一个key的属性，每当列表项有唯一的key属性，React 就能够明确指定列表中的哪一项发生了改变，而无需每次都重新创建那个列表

import React,{ Component } from 'react';

class ListContacts extends Component {
  render(){
    console.log('Props', this.props)
    return (
      <ol className='contact-lis'>
      {this.props.contacts.map((contact) =>(
        <li key={contact.id}>
          {contact.name}
        </li>
      ))}
      </ol>
    )
  }
}

export default ListContacts;