[React-Native]Props和State

简介: 一、Props(自定义参数)大多数组件可以在创建时使用不同的参数进行自定义。 这些创建参数称为Props。 (1)例如,一个基本的React Native组件是Image。

一、Props(自定义参数)

大多数组件可以在创建时使用不同的参数进行自定义。 这些创建参数称为Props。
(1)例如,一个基本的React Native组件是Image。 当您创建图像时,可以使用道具命名源来控制其显示的图像。

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

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

AppRegistry.registerComponent('Bananas', () => Bananas);

这里写图片描述

解释:{pic}被大括号括起来,以将变量pic嵌入到JSX中。 你可以把任何JavaScript表达式放在大括号内JSX。

(2)你自己的组件也可以使用Props。 这样,您可以在应用程序的许多不同位置创建单个组件,每个位置的属性略有不同。 只需在render函数中引用this.props。举个例子:

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

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

这里写图片描述

解释:此示例在JSX中使用Greeting组件,就像内置组件一样,View里面三个自定义控件Greeting除了内容不一样其他都一样,这时就可以在自定义控件里面使用props属性。

另一个新的东西在这里是视图组件。 视图可用作其他组件的容器,以帮助控制样式和布局。

使用props和基本的文本,图像和视图组件,您可以构建各种各样的静态界面。 要了解如何使您的应用随时间变化,您需要了解下面一个知识点状态。

二、State

props和state作为两种数据相关的组建。 props由父节点设置,它们在组件的整个生命周期中都是固定的。 对于要改变的数据,我们必须使用状态。

一般来说,在构造函数中初始化状态,然后当你想改变它时调用setState。

例如,假设我们想让文本一直闪烁。

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

这里写图片描述
本身三个文本就用到props组件,每一个文本又有显示和隐藏属性,就用到state组件。

相关文章
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
62 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
前端开发 JavaScript
react学习(13)props
react学习(13)props
|
2月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
30 0
|
26天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
16 1
|
2月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
64 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
26天前
|
前端开发 JavaScript CDN
React Props
10月更文挑战第8天
11 0
|
2月前
|
前端开发
react学习(15)函数式组件中使用props
react学习(15)函数式组件中使用props
|
2月前
|
前端开发
react学习(14)类式组件的构造器与props
react学习(14)类式组件的构造器与props
|
2月前
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
56 13
|
2月前
|
前端开发
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
本文讨论了在React使用hooks时遇到的一个问题:state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值,解决了因数据更新不及时导致的问题。
55 0