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

上一章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> ); } }

文章图片
表示组件现在我们将理解什么是表示组件，以及它是如何工作的。
理论
表示组件应该只用于向用户表示视图。这些组件没有状态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章节相同的功能，惟一的区别是，我们将代码重构为容器和表示组件。
你可以运行该应用程序，并看到如下面的屏幕截图中的文本。