React Native 组件的默认属性Props的两种写法

最新推荐文章于 2024-07-29 21:59:16 发布
原创 最新推荐文章于 2024-07-29 21:59:16 发布 · 8.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文对比了ES5和ES6中设置组件默认属性的不同方式，并介绍了如何通过this.props访问这些属性。

首先是ES5 的写法  是通过

  getDefaultProps(){
    return {duration:1000}
    
  }

ES 6 的写法如下： 

  static defaultProps = {
     duration:1000,
   }

但他们的调用都是通过 this.props.XXX  来进行调用

比如调用duration  就是通过 this.props.duration 进行访问

ReactNative进阶（四十七）：自定义组件_react native组件开发
2401_84434880的博客
04-27 582
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于。
React-Native组件,JSX,Props属性，state状态
qq_45437757的博客
08-25 379
认识React nactive import React from 'react'; //React Nactive核心组件的引入方式 import {View,Text,Image,ScrollView,TextInput} from 'reactive-nactive'; const App=()=>{ return ( <ScrollView> <Text>Some Text</Text> <Vi
[React Native]initialProps初始化app接受原生传值
学无止境~
10-16 1265
从androidManifest.xml 或者 ios Info.plist 定义变量，根据变量对 app 作相应处理 寻找方案 打开app远程调试 Debug JS remotely 的时候，可以在浏览器中看到 Running application *** with appParams:{"rootTag":1, "initialProps":{}}..如下图: 调试截图 看到 initialProps 我们能猜想到，初始化app的时候，肯定有方法可以从原生传值给React Nativ.
ReactNative创建原生模块
苍蝇小黑的专栏
04-06 1507
ReactNative创建原生模块 编写模块 注册模块 使用原生模块 ReactNative创建原生模块有时候我们需要使用某一模块，而ReactNative可能并没有对其进行包装，那么我们就可以自己实现该模块的封装，以Toast为例。编写模块package com.myproject;import android.widget.Toast;import com.facebook.react.brid
ReactNative学习笔记1
weixin_33755847的博客
03-05 152
一、react-native的生命周期 1. getDefaultProps 在组件创建之前，会先调用 getDefaultProps() ，全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 getInitialState() ，来初始化组件的状态。 2. componentWillMount 准备加载组件 3. render 加载组件 4. componen...
react-native 组件默认属性（defaultProps） 及 属性类型验证（PropTypes）
weixin_34391854的博客
07-20 720
1.所有的属性类型 2.代码 import PropTypes from 'prop-types'; type Props = {}; export default class App extends Component<Props> { static defaultProps = { name: '张三' } static prop...
移动跨平台框架ReactNative 组件属性 props【08】
江一铭
04-01 925
前端江太公 React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。 React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-.
React:React Native 的ES5 ES6写法对照表 | 论坛 - React Native中文社区1
08-03
在React和React Native开发中，理解ES5与ES6（ES2015）的语法差异至关重要，因为它们直接影响代码的可读性、简洁性和维护性。以下是一些关键的对比点： 1. **组件定义**： - **ES5**: 使用`React.createClass`创建...
React Native 新架构 Fabric 之 IOS 适配
最新发布
weixin_53548114的博客
07-29 1397
由于 React Native 自 2021 年宣布支持新渲染器 Fabric，计划至 2024 年底将新架构作为正式版默认启用，逐步淘汰旧架构，作为依赖库的维护者，我们现在开发和迁移自己的依赖就是最好的时机。本文聚焦于开源的 react-native-ad 依赖库的升级适配，旨在帮助 React Native 库开发者和 iOS 开发者了解跨平台开发，深入学习原生开发技术。
[React Native]基础-父子组件之间的传值和函数调用
Lex 的博客
11-26 1955
组件的复用是 React 中非常重要的一个设计，使得界面布局的重用十分便捷，我们可以根据自己的需要来自定义各种组件，这对于结构相似的 UI 构建是很友好的。 所以经常我们会出现如下的代码结构（其中的 MyComponent 是自定义组件）： export default class Home extends Component{ ... render(){ <View&gt...
initialProps被React-Navigation的navigation属性覆盖解决方案
weixin_30765505的博客
12-04 136
怎么开场对我来说一个是个很纠结的问题，Emmm这应该算个好开场。 最近在做一个RN的app端调试工具，在把它嵌入原生app中的时候遇到了一个问题，RN组件里面接受不到原生传过来的initialProps？！ 先po一下问题原因和答案，看官们有兴趣的话可以再看看下面的废话。 问题原因：首先看下我们一般怎么写， const AppWithDebug = createStackNavigat...
react组件生命周期过程
TW85692的博客
07-20 388
实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getInitialState componentWillMount render componentDidMount 存在期 组件已存在时的状态改变 ...
React中的生命周期函数
吴冬雪的博客
03-09 546
组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。使用React.createClass方式定义组件时会使用getDefaultProps这种方式，对于每个组件类来说，该方法只会调用一次，该组件类的所有后续实例将不会再调用，其返回的对象可以用于设置默认的props值。
React Native 入门（五） - Props（属性）
王小北的技术博客
10-25 5825
Props（属性）是组件在被创建的时候就能够使用的各种参数，通常是该组件被使用时传递过来的或者是该组件已经设置的默认参数。
React学习系列十propTypes defaultProps
每天进步一点点儿
12-12 719
都是定义在子组件里面的 defaultProps 父子组件传值中，如果父组件调用子组件的时候不给子组件传值，则可以在defaultProps中定义默认值 propTypes 验证父组件传值的类型合法性 import PropTypes from 'prop-types' class Demo extends React.Compenent{ ... } Demo.propTyp...
设置默认属性值getDefaultProps方法
menglong0329的博客
07-12 4964
一、getDefaultProps方法介绍通过实现组件的getDefaultProps，对属性设置默认值。二、实际代码定义ShowTitle组件var ShowTitle = React.createClass({ getDefaultProps:function(){ return{ title : "百度科技" } }, render : functio...
React-Native 第三章 生命周期介绍和使用
u010689434的博客
10-19 325
介绍 可以把组件生命周期大致分为三个阶段 第一阶段 ： 是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化。 第二阶段 : 是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面。 第三阶段 ： 是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。 实例化阶段的函数功能分析 下面来详细介绍生命周期中的各...
React Native 中 component 生命周期
热门推荐
子墨博客
07-03 7万+
React Native中的component跟Android中的activity，fragment等一样，存在生命周期，下面先给出component的生命周期图getDefaultPropsobject getDefaultProps()执行过一次后，被创建的类会有缓存，映射的值会存在this.props,前提是这个prop不是父组件指定的 这个方法在对象被创建之前执行，因此不能在方法内调用th
React Native 中项目的组件使用写法
06-07
在 React Native 中，我们可以使用基本的组件和自定义组件来构建应用程序界面。以下是使用基本组件和自定义组件的示例： 使用基本组件： ```jsx import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const App = () => { return ( <View style={styles.container}> <Text style={styles.text}>Hello, React Native!</Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 20, fontWeight: 'bold', }, }); export default App; ``` 使用自定义组件： ```jsx import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const MyComponent = ({ title, message }) => { return ( <View style={styles.container}> <Text style={styles.title}>{title}</Text> <Text style={styles.message}>{message}</Text> </View> ); }; const App = () => { return ( <View style={styles.container}> <MyComponent title="Welcome" message="This is a custom component in React Native." /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, title: { fontSize: 24, fontWeight: 'bold', }, message: { fontSize: 16, marginVertical: 10, }, }); export default App; ``` 在上面的示例中，我们定义了一个名为`MyComponent`的自定义组件，并将其作为子组件添加到`App`组件中。在`MyComponent`组件中，我们可以使用`props`来接收来自父组件的数据，并根据需要渲染内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值