首页 > 软件开发 > HTML >

React简明教程(二)(props的使用)

来源:互联网 2023-03-16 19:10:49 342

上一篇我们大致介绍了如何使用React还有React的基本格式用法,现在我们来继续了解一下React的组件化是怎么实现的,React的组件化意识就是React前端区别于别的前端的一个灵魂,但是实际上他并不复杂,也希望大家可以耐下性子来学习,可以学有所得。6lA办公区 - 实用经验教程分享!

工具/原料

  • 浏览器
  • React环境
  • 记事本

方法/步骤

  • 1

    我们还是先来看一下最普通的helloworld显示,我们这里可以很清楚的看到,这两者是通过hellomessage联系在一起的,body下的divid是example方法,通过我们jsx里面的render方法进行调用getElementById给我们的div进行操作,然后我们发现render里面有一个标签就是hellomessage,这个又是通过一个新的render也就是React.createClass的方法来使用的。6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

  • 2

    下面我来讲一下如何传参数,传参数的时候我们需要在父组件那里输入我们需要传递的属性名称和属性值,我们这里传递的就是name,然后我们可以在方法hellomessage里面通过调用this.props.name来传递我们上一级用到的name属性。6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

  • 3

    这个就是我们props的调用,当然props其实也是可以赋初值的,具体方法如下图所示:6lA办公区 - 实用经验教程分享!

    我们是通过函数getDefaultProps来给我们的name对象赋值,然后和上面一样,采用了this.props方法来取得我们name对象里面的值6lA办公区 - 实用经验教程分享!

    注意:我们在主页面body下是不能定义这个标签内的name参数的,因为props是不可变变量。6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

  • 3相关内容非法爬取自百度经验
  • 4

    我们再来讲一下props的验证,说白了就是props的类型验证和转化,通过prop方法来解决,可以验证变量的属性还有很多,如下图,本例子是验证和转化为非空的字符串类型6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

    React简明教程(二)(props的使用)6lA办公区 - 实用经验教程分享!

  • 5

    我们这里一定要注意,props这个类型是不可变的,也就是要么在原生html里面初始化,要么在jsx里面初始化,一旦初始化就不能再次改变!!!6lA办公区 - 实用经验教程分享!

    所以这就是Props的大致介绍了,是不是很简单呢?6lA办公区 - 实用经验教程分享!

  • 注意事项

    • props最多初始化一次
    • js部分记得加大括号

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!6lA办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码