React Native 的props，state，refs使用详解

最新推荐文章于 2022-07-15 09:03:49 发布
最新推荐文章于 2022-07-15 09:03:49 发布
阅读量838 收藏 2
点赞数
分类专栏： React-Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangjianfeng21/article/details/95494591
版权

props的详情解释

props是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常由父层组件向子层组件传递）

我个人理解,该属性的值是在父组件中引用子组件时候指定的,该属性是子组件中定义的,比如新建一个苹果组件,苹果有颜色的属性,在构建这个组件的时候,指定一个color属性,在父组件使用的时候再指定一个具体的颜色值,那么最后子组件就会拿到这个值,显示相应颜色的苹果.

如何使用props

新建一个苹果组件 AppleComponent,并且使用props中的一个属性apple_color属性

import React, { Component } from 'react';
import { Text, View } from "react-native";

export default class AppleComponent extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <View>
                <Text>我是一个{this.props.apple_color}的苹果组件</Text>
            </View>
        )
    }
}

在父组件中导入该组件并且将子组件需要的props属性传递给子组件

import React, { Component } from 'react';
import { View } from 'react-native';

import AppleComponent from './AppleComponent';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <AppleComponent apple_color='red'/>
        </View>
    );
  }
}

默认属性以及它的作用

在子组件中可以定义一个默认的props属性，有可能父组件并没有传递这个子组件需要的props属性，所以最好设置一个默认的属性

当父组件没有传递指定属性，子组件也没有声明默认属性，那么就是空的，不会报错

在子组件中声明默认的props属性，当父组件没有传递指定属性的时候，子组件读取默认的props值

import React, { Component } from 'react';
import { Text, View } from "react-native";

export default class AppleComponent extends Component{
    constructor(props){
        super(props);
    }
    static defaultProps = {
        apple_color: 'blue'
    }
    render(){
        return(
            <View>
                <Text>我是一个{this.props.apple_color}的苹果组件</Text>
            </View>
        )
    }
}

对props进行约束和检查

对于比较新的版本需要独立安装prop-types 库

npm install --save prop-types

然后在需要使用的js文件中引入这个prop-types 库

import PropTypes from 'prop-types';

随着项目的增大，那么某个组件中的props类型就要进行一定的约束和检查，传递进来的类型是否正确,如果不正确，运行的时候会给出黄色的警告,如下：子组件需要的是一个string类型的props，但是父组件传递的是array

import React, { Component } from 'react';
import { View } from 'react-native';

import AppleComponent from './AppleComponent';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <AppleComponent apple_color={[23,4]}/>
        </View>
    );
  }
}
import React, { Component } from 'react';
import { Text, View } from "react-native";
import PropTypes from 'prop-types'

export default class AppleComponent extends Component{
    constructor(props){
        super(props);
    }
    static defaultProps = {
        apple_color: 'blue'
    }
    static propTypes = {
        apple_color: PropTypes.string.isRequired // isRequired表示必须传递
    }
    render(){
        return(
            <View>
                <Text>我是一个{this.props.apple_color}的苹果组件</Text>
            </View>
        )
    }
}

 

props使用技巧之三点运算符和解构赋值

如果父组件传递的是一个对象或者数组，那么子组件中接收的时候可以通过解构赋值的方式来获取到对象的每个属性或者数组中的每个元素

三点运算符

下面代码就是讲AppleMessage这个对象的所有属性都传递给子组件

import React, { Component } from 'react';
import { View } from 'react-native';

import AppleComponent from './AppleComponent';

export default class HelloWorldApp extends Component {
  render() {
    var AppleMessage = {
        name: '富士康',
        color: 'red'
    }
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <AppleComponent {...AppleMessage}/>
        </View>
    );
  }
}

import React, { Component } from 'react';
import { Text, View } from "react-native";
import PropTypes from 'prop-types'

export default class AppleComponent extends Component{
    constructor(props){
        super(props);
    }
    static defaultProps = {
        name: '富士康',
        color: 'red',
        address: '北京'
    }
    static propTypes = {
        AppleMessage: PropTypes.object.isRequired
    }
    render(){
        return(
            <View>
                <Text>我是一个{this.props.name}的苹果组件</Text>
                <Text>我是一个{this.props.color}的苹果组件</Text>
                <Text>我是一个{this.props.address}的苹果组件</Text>
            </View>
        )
    }
}

 

解构赋值

import React, { Component } from 'react';
import { View } from 'react-native';

import AppleComponent from './AppleComponent';

export default class HelloWorldApp extends Component {
  render() {
    var AppleMessage = {
        name: '富士康',
        color: 'red',
        address: '北京'
    }

    var {name, address} = AppleMessage
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <AppleComponent name={name} address={address}/>
        </View>
    );
  }
}
import React, { Component } from 'react';
import { Text, View } from "react-native";
import PropTypes from 'prop-types'

export default class AppleComponent extends Component{
    constructor(props){
        super(props);
    }
    static defaultProps = {
        name: '富士康',
        color: 'red',
        address: '北京'
    }
    static propTypes = {
        AppleMessage: PropTypes.object.isRequired
    }
    render(){
        return(
            <View>
                <Text>我是一个{this.props.name}的苹果组件</Text>
                <Text>我是一个{this.props.color}的苹果组件</Text>
                <Text>我是一个{this.props.address}的苹果组件</Text>
            </View>
        )
    }
}

 

 

 

State的详情解释

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

设置一个组件的默认state

import React, { Component } from 'react';
import { Text, View } from "react-native";

export default class AppleComponent extends Component{
  constructor(props){
    super(props);
    this.state = {
      size: 80
    }
  }
  render(){
    return(
        <View>
          <Text>我是一个size为{this.state.size}的苹果组件</Text>
        </View>
    )
  }
}

另外一种写法

import React, { Component } from 'react';
import { Text, View } from "react-native";

export default class AppleComponent extends Component{
  state = {
    size: 80
  }
  constructor(props){
    super(props);
  }
  render(){
    return(
        <View>
          <Text>我是一个size为{this.state.size}的苹果组件</Text>
        </View>
    )
  }
}

修改state状态setState

如下面代码，每次点击这段文字的时候size的值都会增加10

import React, { Component } from 'react';
import { Text, View } from "react-native";

export default class AppleComponent extends Component{
  state = {
    size: 80
  }
  constructor(props){
    super(props);
  }
  render(){
    return(
        <View>
          <Text onPress={() => {
            this.setState({
              size: this.state.size + 10
            })
          }}>我是一个size为{this.state.size}的苹果组件</Text>
        </View>
    )
  }
}

 

 

ref的详细解释

在一个子组件中添加一个获取state属性的方法

import React, { Component } from 'react';
import { Text, View } from "react-native";

export default class AppleComponent extends Component{
    state = {
        size: 80
    }
    constructor(props){
        super(props);
    }
    getSize(){
        return this.state.size
    }
    render(){
        return(
            <View>
                <Text onPress={() => {
                    this.setState({
                        size: this.state.size + 10
                    })
                }}>我是一个苹果组件</Text>
            </View>
        )
    }
}

父组件中使用ref绑定子组件，然后调用子组件中的getSize方法

import React, { Component } from 'react';
import {Text, View} from 'react-native';

import RefTest from './RefTest';

export default class HelloWorldApp extends Component {
  state = {
      size: 0
  }
  render() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text
                onPress={() => {
                    var size = this.refs.reftest.getSize() // 或者this.refs['reftest'].getSize()
                    this.setState({
                        size: size
                    })
                }}>size为{this.state.size}</Text>
            <RefTest ref='reftest' />
        </View>
    );
  }
}

或者使用下面这种方式获取绑定的组件

import React, { Component } from 'react';
import {Text, View} from 'react-native';

import RefTest from './RefTest';

export default class HelloWorldApp extends Component {
  state = {
      size: 0
  }
  render() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text
                onPress={() => {
                    var size = this.reftest.getSize()
                    this.setState({
                        size: size
                    })
                }}>size为{this.state.size}</Text>
            <RefTest ref = {reftest => this.reftest = reftest} />
        </View>
    );
  }
}

 

胡椒粉0121
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native 手势触摸事件机制详解（进阶篇）
...
10-20 4018
  源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。 在基础篇，对RN中的触摸事件做了详细的介绍。相信大家对于触摸事件流程机制有了更为清晰的认识。没有浏览的可以先看看基础篇：《 React Native 手势触摸事件机制详解（基础篇）》 本篇博客中，同样延续基础篇中结尾的内容，对触摸事件的执行流程从代码层执行流程进行更深的说明，并使用RN系统提供的...
React教程详解一（props、state、refs、生命周期）
最新发布
一只努力搬砖的打工妹纸
03-01 563
大厂用react框架开发的较多哦，从本期开始，总结react教程，一起卷起来~
React Native - Keyboard API使用详解（监听处理键盘事件）
火星男孩的分享空间
08-15 3829
参考： React Native - Keyboard API使用详解（监听处理键盘事件） 当我们点击输入框时，手机的软键盘会自动弹出，以便用户进行输入。 但有时我们想在键盘弹出时对页面布局做个调整， 或者在程序中使用代码收起这个软键盘，这些借助 React Native 框架提供的 Keyboard API 就可以实现。 一、Keyboard API 提供的方法 Keyboard API 提供如下的静态函数供开发者使用。 1，addListener(eventName, callback) （1）这个函数
React Native eslint配置
流星雨的博客
07-15 1455
eslint提供了一个插件化的javascript代码检测工具，本文依托于React Native讲解eslint的使用。
react-native入门
qq_41256114的博客
06-01 278
**转载：**https://blog.csdn.net/hanxue_wuhen/article/details/78802204 ReactNative采用的开发语言是JavaScript，符合ECMAScript语法规范。 ECMAScript和JavaScript关系： ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。...
React学习01：react入门、state、props、ref详解
Java修炼者的博客
06-30 346
React是一个将数据渲染为HTML视图的开源JavaScript库使用React可解决原生DOM的三个问题。原生JavaScript操作DOM繁琐、效率低(DOM-API操作UI)使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排原生JavaScript没有组件化编码方案，代码复用率低案例：左侧输入完后，点击提示输入数据弹出框，右侧输入完后失去焦点，弹出弹出框。
React 之 Refs 详解
weixin_34321753的博客
03-29 303
在介绍 Refs 之前，我们先来了解两个概念：受控组件 和 不受控组件。 受控组件 在HTML中，表单元素（如 input、textarea、select）之类的表单元素通常可以自己维护state，并根据用户的输入进行更新。而在React中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过 setState()来更新。 在此，我们将 React的state作...
(十四)Reactnative中ref属相详解
袁梦龙的博客
11-25 7987
在用Reactnative写工程时，默认奇妙的有一种像OC中，或者java 中或者当前类的私有属相的想法，state 和props都不能满足时，就是ref   它能达到其他语言中持有一个view组件，并且局部的刷新 ref 接受值为string类型的参数或者一个函数function callback。这一特性让开发者对ref的使用更加灵活。 render() { return
入门react-native——state和ref使用
罗春娥的技术园
10-22 1126
一、state定义两种方式;  1.1、组件内直接定义:   state={            size:80,        }   1.2、构造方法内定义:   constructor(props){       super(props);       this.state={           size:80,       }   }   二、React Native的ref使用详解（...
React Native createStackNavigator 开发详解
huangjianfeng21的博客
07-13 5297
createStackNavigator 介绍 createStackNavigator提供APP屏幕之间切换的能力，它是以栈的形式还管理屏幕之间的切换，新切换到的屏幕会放在栈的顶部。 屏幕转场风格 默认情况下，createStackNavigator提供了转场过渡效果，在Android和iOS上过渡效果是不同的，这也是React Native重平台性的一个体现，在Androi...
React Native 项目调试
huangjianfeng21的博客
07-12 1368
模拟器调试 要使用快捷键请务必确保模拟器的 Hardware 菜单中，Keyboard 选项下的"Connect Hardware Keyboard"处于开启状态，否则按键是没有响应的。我们在模拟器上按快捷键command + D，即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。 Android 模拟器对应的则是Command⌘+M（windows 上可能是 F1 或者 F2），...
列表组件 VirtualizedList
huangjianfeng21的博客
09-18 1188
列表组件VirtualizedList 介绍 FlatList和SectionList的底层实现。FlatList 和 SectionList 使用起来更方便，同时也有相对更详细的文档。一般来说，仅当想获得比 FlatList 更高的灵活性（比如说在使用 immutable data 而不是 普通数组）的时候，你才应该考虑使用 VirtualizedList。 Vritualization 通...
React Native组件的生命周期详解
huangjianfeng21的博客
07-11 773
组件的生命周期 一个React Native组件从它被React Native框架加载，到最终被React Native框架卸载，会经历一个完整的生命周期。 在这个生命周期中，我们可以定义一些生命周期函数，用来处理在特定条件下React Native组件将要执行的操作，比如在某个时间点读取数据等。 在iOS中UIViewController提供了(void)viewWillA...
React-Native 项目中变量与常量，方法，组件的导入和导出
huangjianfeng21的博客
07-11 692
变量的导入和导出 在一个模块中定义变量和常量并且导出 const name = '小明' var age = 22 export {name, age} // 批量导出 然后直接在需要的组件中导入，并且使用 import React, { Component } from 'react'; import { View, Text } from 'react-native'; im...
react-navigation 组件详解
huangjianfeng21的博客
07-13 639
react-navigation 介绍 随着react-navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件react-navigation。 react-navigation的出现替代了Navigator、 Ex-N...
React Native reateMaterialTopTabNavigator 详解
huangjianfeng21的博客
09-04 561
什么是createMaterialTopTabNavigator createMaterialTopTabNavigator API createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig): RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。 Ta...
React-Native 组件以及创建组件的两种方式
huangjianfeng21的博客
07-11 533
什么是React Native的组件 React组件让你讲UI分割成独立的，可重用的一些碎片或者部分，这些部分都是相互独立的 如下面截图，这个页面是有多个单独的组件组成的，不同的组件通过不同的关系组合到一起就形成了我们所看到的页面 ES6创建组件的方式（最新，推荐） 自定义一个组件叫HelloEs6Component import React, { Component }...
React Native 开发中类的使用
huangjianfeng21的博客
07-13 316
对熟悉Java，object-c，c#等纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解。 创建一个Student的类并将其导出 class Student { constructor(name, age, sex) { this.name = name ...
"React Native Swiper用法1详解
React Native Swiper 的使用方法如下： 1. 通过npm安装React Native Swiper 通过命令npm install React-native-swiper --save可以安装React Native Swiper，并且在安装成功后会在package.json中配置依赖信息，类似...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值