react 的传递属性 props 详解

最新推荐文章于 2024-05-29 18:55:00 发布

web前端 zxp

最新推荐文章于 2024-05-29 18:55:00 发布

阅读量4.6k

点赞数 2

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_44163269/article/details/106266341

版权

什么是 props ？

就是你在使用一个组件的时候希望这个组件可以复用，希望他里面的形态、所需的数据可以在我们调用的时候可以动态的传进去。

props 哪里来的？

我们组件使用类创建的时候你需要继承 React.component，这个 props 就是继承React 来的

传递属性

<组件名 属性名=值 属性名2=值2 .. />

propName="字符"  propName={js数据类型}

调用组件名的时候可以传递一个或多个属性
属性的名字是小驼峰
- 他的值双引号就是字符串，
- 单花括号就是 jsx 的表达式
- 表达式就是一个对象后面掉一个 api() 就是一个表达式，声明一个变量就是语句了，调用一个变量就是表达式了

使用属性

{this.props.属性名}

this 代表的是组件本身（将来的实例）
- 在类里面使用 this 它指向的是组件本身
- 上图中我们看到组件本身是有 props 的，就然 this代表组件本身，那我们就可以通过 this.props.xxx来获取我们想要的信息
对象无法直接通过{对象}展示
- 在 react 在 react-dom 渲染时，数据里面的对象拉出来不可以之间加载，要精确到里面的键才可以

使用展示：


import React from 'react';
import ReactDom from 'react-d

关注