React中关于props基本的使用_reprop用法-优快云博客

本文链接：https://blog.youkuaiyun.com/network04/article/details/121397926

本文介绍了在React中如何通过props在组件之间传递数据。包括函数组件和类组件接收props的方法，并展示了具体的代码实例。

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

在前面的课程中，我们讲解过一个页面可以有不同的组件组合而成，而这些组件之间是需要进行数据的共享的，这就用到了组件之间的进行通信。

组件之间是封闭的，要接收外部数据应该用props来完成，props的作用就是接收传递给组件的数据。

这里，先讲解props的应用，后面再详细的讲解组件通信的内容。

下面先来看一下“函数组件”怎样接收数据。

import React from 'react'
function ShowMessage(props) {
    return(<div>
        <h1>我叫{props.name},今年{props.age}岁</h1>
    </div>)
}
export default ShowMessage

在组件渲染的时候，传递相应的数据。

import ShowMessage from './props基本使用.js'
ReactDom.render(<ShowMessage name={'zhangsan'} age={16} />,document.getElementById('root'))

通过上面的代码，可以发现在渲染组件的时候，指定需要传递的属性以及属性对应的值，当然属性可以有多个。

那么在函数组件中就可以props来进行相应的接收。其实，通过代码可以发现props就是一个对象。

下面再看一下关于类组件的传值。

class App extends React.Component{
    render() {
        return (
            <div>
                   <h1>我叫{this.props.name},今年{this.props.age}岁</h1>
             </div>
        )
    }
}
export default App

渲染类组件的时候，传递相应的数据。

import ShowMessage from './17、props基本使用.js'
ReactDom.render(<ShowMessage name={'zhangsan'} age={18} />,document.getElementById('root'))

通过上面的案例可以发现，类组件与函数组件在传递数据的时候形式是一样的，不同的是在类组件中需要通过this.props的形式来接收传递到类组件中的数据。

学IT，上博学谷