React Native prop介绍和用法 – React Native实战教程

上一章React Native实战教程请查看:React Native状态state介绍和用法
在上一章中,我们展示了如何使用可变state状态,在本章中,我们将向你展示如何组合状态state和prop。
表示组件应该通过传递prop来获取所有数据,只有容器组件应该有状态state。
容器组件现在我们将了解什么是容器组件,以及它是如何工作的。
理论
现在我们将更新容器组件,该组件将处理状态state并将prop传递给表示组件。
容器组件仅用于处理状态state,所有与视图(样式等)相关的功能都将在表示组件中处理。
例子
如果我们想使用上一章的例子,我们需要从render函数中删除Text元素,因为这个元素用于向用户显示文本,这应该在表示组件内部。
让我们回顾一下下面给出的例子中的代码,我们将导入PresentationalComponent并将其传递给render函数。
导入PresentationalComponent并将其传递给render函数后,需要传递prop。我们将通过添加myText = {this.state.myText}和deleteText = {this.deleteText}传递prop到< PresentationalComponent> ,现在,我们将能够在表示组件中访问它。
App.js

import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; import PresentationalComponent from './PresentationalComponent'; export default class App extends React.Component { state = { myState: 'React Native prop介绍和用法 - React Native实战教程', }; updateState = () => { this.setState({myState: 'The state is updated'}); }; render() { return ( < View> < PresentationalComponent myState={this.state.myState} updateState={this.updateState} /> < /View> ); } }

React Native prop介绍和用法 &#8211; React Native实战教程

文章图片
表示组件现在我们将理解什么是表示组件,以及它是如何工作的。
理论
表示组件应该只用于向用户表示视图。这些组件没有状态state,他们接收所有的数据和功能作为prop。
【React Native prop介绍和用法 – React Native实战教程】最佳实践是使用尽可能多的表示组件。
例子
正如我们在前一章中提到的,我们对表示组件使用EC6函数语法。
我们的组件将接收prop,返回视图元素,使用{prop.myText}显示文本,并在用户单击文本时调用{props.deleteText}函数。
PresentationalComponent.js
import React, {Component} from 'react'; import {Text, View} from 'react-native'; const PresentationalComponent = props => { return ( < View> < Text onPress={props.updateState}>{props.myState}< /Text> < /View> ); }; export default PresentationalComponent;

现在,我们有了与State章节相同的功能,惟一的区别是,我们将代码重构为容器和表示组件。
你可以运行该应用程序,并看到如下面的屏幕截图中的文本。
React Native prop介绍和用法 &#8211; React Native实战教程

文章图片

    推荐阅读