React 的函数组件和类组件中的props

最新推荐文章于 2025-07-03 11:39:52 发布

youngjqz

最新推荐文章于 2025-07-03 11:39:52 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React 文章标签：前端 React javascript

本文链接：https://blog.youkuaiyun.com/youngjqz/article/details/80318698

React 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了React中函数组件和类组件如何使用Props。函数组件直接将Props作为参数传递并在组件内部通过点语法访问属性；而类组件则通过this.props访问Props属性。

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

React 的函数组件和类组件中的props

函数组件

函数组件中的props是一个对象直接作为函数的参数传入,在组件内容中可以直接用点语法使用props对象中的属性,代码如下:

function Test1(props) {
        return(
            <div>
                The user is <b>{props.isLoggedIn? 'jack':'not'} </b>logged in.
            </div>
        )
    }
    const element = <Test isLoggedIn={true}/>;
    ReactDOM.render(
        element,
        document.getElementById('app')
    )

类组件

在刘组件中的props存放在this中,这一点和VUE中的props类似,但是Vue可以直接使用this后跟属性名,但是React中还需要this.props后跟相对应的属性名.

    class Test extends React.Component{
        render(){
            return(
                <div>
                    The user is <b>{this.props.isLoggedIn? 'jack':'not'} </b>logged in.
                </div>
            )
        }
    }
    const element = <Test isLoggedIn={true}/>;
    ReactDOM.render(
        element,
        document.getElementById('app')
    )