[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基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
1月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
2月前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
|
2月前
|
前端开发 JavaScript
【掰开揉碎】react中的super(props)
【掰开揉碎】react中的super(props)
|
2月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
44 1
|
2月前
|
前端开发 JavaScript
详解React:Props构建可复用UI的基石
详解React:Props构建可复用UI的基石
19 0
|
2月前
|
前端开发
react父组件props变化的时候子组件怎么监听?
react父组件props变化的时候子组件怎么监听?
112 0
|
11月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
49 0
|
11月前
|
前端开发
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之8
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之7
35 0
|
2月前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
43 1