首页 技术 正文
技术 2022年11月23日
0 收藏 711 点赞 4,328 浏览 1058 个字

组件是封闭的 要接受外部数据应该通过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’))

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/140977.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:4,994
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,472
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,281
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,282
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,840
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,072
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站