组件是封闭的 要接受外部数据应该通过props来实现

props的作用:接受传递给组件的数据

传递数据:给组件标签添加属性

接收数据:函数组件通过参数props接收数据 类组件通过this.props接受数据

函数组件

//导入react
import React from 'react'
import ReactDOM from 'react-dom'
 
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
 
//函数组件
const HelloWorld=props=>{
    console.log(props)
    return (
        <div>
            <h1>props:{props.name}</h1>
        </div>
    )
}
    
 
ReactDOM.render(<HelloWorld name="geyao" />, document.getElementById('root'))
类组件

//导入react
import React from 'react'
import ReactDOM from 'react-dom'
 
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
 
class HelloWorld extends React.Component{
    render(){
        console.log(this.props)
        return (
            <div>
                <h1>props:{this.props.name}</h1>
            </div>
        )
    }
}
//函数组件
// const HelloWorld = (props) => {
//     console.log(props)
//     return (
//         <div>
//             <h1>props:{props.name}</h1>
//         </div>
//     )
// }
 
ReactDOM.render(<HelloWorld name="geyao" />, document.getElementById('root'))

好客租房48-组件的props(基本使用)的更多相关文章

  1. 好客租房46-react组件进阶目标

    1能够使用props接收数据 2能够使用父子组件之间的通讯 3能够实现兄弟组件之间的通讯 4能够给组件添加props校验 5能够说出生命周期常用的钩子函数 6能够知道高阶组件的作用 组件通讯介绍 组件 ...

  2. 好客租房49-组件的props(特点)

    特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...

  3. 好客租房43-react组件基础综合案例-4获取评论信息

    获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...

  4. 好客租房44-react组件基础综合案例-5发表评论-1

    发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...

  5. 好客租房45-react组件基础综合案例-6边界问题

    边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...

  6. 好客租房20-react组件介绍

    1react组件介绍 组件是react中的一等公民 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点 可复用性 独立 可组合

  7. 好客租房39-react组件基础总结

    1组件的两种创建方式:函数组件和类组件 2无状态函数组件 负责静态结构展示 3有状态组件 负责更新ui 让页面动起来 4绑定事件注意this指向问题 5使用受控组件创建表单 6完全利用js语言的能够力 ...

  8. 好客租房40-react组件基础综合案例-案例需求分析

    实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ...

  9. 好客租房41-react组件基础综合案例-渲染列表数据

    1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...

随机推荐

  1. vue H5 超简单的swiper制作抖音上拉切换视频播放

    -----html部分------ <swiper vertical :style="{height: windowheight+'px',width:375+'px'}" ...

  2. 写了一个web os脚手架

    预览地址在这里:http://thx.github.io/magix-os/项目地址在这里:https://github.com/thx/magix-os 介绍下目录结构 核心目录cores主要是构成 ...

  3. vue和mint-ui loadMore 实现上拉加载和下拉刷新

    首先安装mint-ui组件库 npm install mint-ui 在main.js中引入mint-ui和样式 import 'mint-ui/lib/style.css' import MintU ...

  4. PAT B1051 复数乘法

    输入样例: 2.3 3.5 5.2 0.4 输出样例: -8.68-8.23i 解题思路: 1.读入R1.P1.R2.P2. 2.A=(R1*R2)cos(P1+P2),B=(R1*R2)sin(P1 ...

  5. uniapp中websokcet封装和使用

    1.  websocket.js   封装代码 //是否已经连接上ws let isOpenSocket = false //心跳间隔,单位毫秒 let heartBeatDelay = 3000 l ...

  6. Javascript中数组的判断方法

    摘要: 1.数组检测的方法: 1) typeof . 2) instanceof . 3) constructor . 4) Object.prototype.toString. 5) Array.i ...

  7. Linux_连接工具_SecureCRT的使用教程

    什么是SecureCRT? SecureCRT是一款支持 SSH2.SSH1.Telnet.Telnet/SSH.Relogin.Serial.TAPI.RAW 等协议的终端仿真程序,最吸引我的是,S ...

  8. Visual Studio 安装 MFC

    **Visual Studio 安装 MFC 库**   打开 Visual Studio Installer //程序   选择对应的版本 (本人 VS2022)->修改   [点击]单个组件 ...

  9. linux磁盘之回环设备

    为什么要讲回环设备,下面看下系统的采样情况 上面图有loop0,loop1等设备标记,这些是什么?看看下面fdisk -l 的结果,乱糟糟的一堆? 什么是回环设备? 上面的loop0, loop1就是 ...

  10. 『现学现忘』Git基础 — 1、版本控制系统介绍

    在具体了解Git之前,首先需要我们了解一下VCS,即版本控制系统(version control system) 1.什么是版本控制系统 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版 ...