react demo10 (设置组件属性的默认值getDefaultProps)

最新推荐文章于 2024-08-13 07:38:12 发布
最新推荐文章于 2024-08-13 07:38:12 发布
阅读量5.8k 收藏
点赞数
分类专栏： 前端笔记 react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32584661/article/details/71274524
版权 
需求：定义一个组件，设置title属性默认值
学习：组件属性默认值getDefaultProps方法
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react dome</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
</head>

<body>

<div id="container"></div>


<script type="text/babel">

    /*
     设置组件属性的默认值，通过组件的getDefaultProps方法

     */


    //创建组件
    var ShowTitle = React.createClass({
        getDefaultProps:function () {
            return {
                title:"将前端坚持到底！"
            }
        },
        render:function(){
            return <h1>{this.props.title}</h1>
        }
    })



    //渲染
    ReactDOM.render(
            <ShowTitle/>,   //在未设置title属性时，显示默认值，设置后覆盖默认值
            document.getElementById("container")
    )



</script>

</body>
</html>
酷jjs
关注
专栏目录
2023年前端面试汇总-React
越陌度阡
06-29 830
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
React Native之React速学教程_不学react直接学react native可以吗
2401_84447149的博客
04-29 560
每一个XML标签都会被JSX转换工具转换成纯JavaScript代码，使用JSX，组件的结构和组件之间的关系看上去更加清晰。JSX并不是React必须使用的，但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。
React的getDefaultProps和getInitialState
weixin_30530523的博客
08-22 490
getDefaultProps 不是获取默认props，而是设置默认props，主要用在ES5的React写法中getInitialState 不是获取默认State，而是设置初始的state，主要是用在ES5的React写法中 下面是ES5和ES6的写法对比 //ES5写法 var Video = React.createClass({ getDefaultProp...
react使用 PropTypes 和 getDefaultProps()
banqiaoxian4609的博客
08-22 213
一定要写PropTypes，切莫为了省事而不写 如果一个Props不是requied，一定在getDefaultProps中设置它 React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型，如果不正确，console中就会出现对应的warning。出于性能方面的考虑，这个API只在开发环境下使用。 基本使用方法： propTypes: { myAr...
React类组件的类型 - 组件属性和属性默认值
最新发布
听海边涛声
08-13 158
React类组件的类型 - 组件属性和属性默认值
React(三)——React组件之属性默认值
黎小小的博客
03-30 6424
目录 1.默认属性值 1.1defaultProps 静态属性 1.1.1基于 static 的写法 2.非受控组件默认值 2.1defaultValue 属性 2.1defaultChecked 属性 1.默认属性值 1.1defaultProps 静态属性 defaultProps 可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 nu...
React 函数组件与类组件属性默认值
卡尔特斯
04-05 1539
【代码】React 函数组件与类组件属性默认值。
react组件进阶 属性默认值
twinkle的博客
02-24 2145
默认值 我们在编写组件的时候，其实好多时候，我们都想组件的参数是可选参数，如果没有这个参数，我们就默认给上一个参数，在vue 中我们可以在模板中的props中定义属性名，然后default就有默认值了。但是在react 中我们如何来实现这个呢？ react 组件类型有两种，然后给默认值也是有两种方法的 方法一：利用js的天生优势——混合 类组件 使用案列如下： 上面我的使用方式是在render里面的，这个也可以是constructor里面来进行属性的赋值，具体的使用方式，根据实际情况而定，只要满足在
react（二）：用实例认识react
sunshine940326的博客
03-05 2212
昨天在认识了什么是react之后，今天开始用代码来写一些demo，跟着慕课网的视频一起写demo发现运行不出来，找其原因是视频太老了，react已经更新换代了，摔！！ 然后跟着阮一峰老师一起写12个demo，阮一峰老师的教程：React 入门实例教程，希望大家可以看一下老师写的demo github地址，求fork，求star，(～￣▽￣)～ HTML模板这是一个最简单的react模板<!DO
react入门实例
veinso的博客
04-06 276
react作为前端框架之一，有着较好的性能，它主要有如下特性：1.声明式设计 −React采用声明范式，可以轻松描述应用。2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。5.组件 − 通过 React 构...
ReactNative编码规范
TaoLee
01-03 1042
代码风格遵循Airbnb eslint 规范 代码顺序 好的顺序，代码清晰，方便查找，提高效率。 import顺序一般如下，并且分组 React ReactNative Redux ReactRedux 第三方库 自定义组件 图片 公共样式 业务组件及其样式 Actions 方法的顺序如下 getDefaultProps getInitialState co
浅谈vue-props的default写不写有什么区别
10-14
主要介绍了浅谈vue-props的default写不写有什么区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
react 源码defaultProps实现
大前端秘籍
06-13 1349
首先我们回顾一下 defaultProps 的用法 import React from 'react'; class App extends React.Component { render() { return <div>{this.props.name}</div> } } App.defaultProps = { name: "Hello React" }; ReactDOM.render(<App />, document.getE
设置默认属性值getDefaultProps方法
menglong0329的博客
07-12 4911
一、getDefaultProps方法介绍通过实现组件的getDefaultProps，对属性设置默认值。二、实际代码定义ShowTitle组件var ShowTitle = React.createClass({ getDefaultProps:function(){ return{ title : "百度科技" } }, render : functio...
React工作19:react设置默认值
qq_41632427的博客
07-15 519
react
[react] React中你有使用过getDefaultProps吗？它有什么作用？
歌谣的博客
11-21 300
[react] React中你有使用过getDefaultProps吗？它有什么作用？ createReactClass 参数对象内的一个方法，用于初始化组件属性 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
react中怎么为props设置默认值
笔记、经验、日常分享
05-20 970
在react中可以通过props来实现父子组件之间的数据传递。有些时候，需要给props一个默认值，当在使用组件的时候如果没有给数据，可以显示默认数据，让用户体验更好。哪么在react中，在class组件或函数式组件中应该如何为props指定默认值呢？
react-native 组件默认属性（defaultProps） 及 属性类型验证（PropTypes）
weixin_34391854的博客
07-20 671
1.所有的属性类型 2.代码 import PropTypes from 'prop-types'; type Props = {}; export default class App extends Component<Props> { static defaultProps = { name: '张三' } static prop...
React 中 getDefaultProps 的作用
My_wife_QBL的博客
08-08 836
是 React 类组件中的一个静态方法，用于定义组件的默认属性。当一个组件没有接收到某些 props 时，这些默认值将被使用。通过定义默认 props，开发者可以提高组件的灵活性，并确保它们在缺少特定数据时仍然可以正常渲染。
React Native组件属性确认：prop-types详解
在React Native开发中，属性确认（prop validation）是一个重要的实践，它确保组件接收到正确的属性值，从而避免因数据类型错误或缺少必需属性而导致的潜在问题。`prop-types`库是React社区广泛采用的工具，用于在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值