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>
    );
  }
}

表示组件

现在我们将理解什么是表示组件，以及它是如何工作的。

理论

表示组件应该只用于向用户表示视图。这些组件没有状态state，他们接收所有的数据和功能作为prop。

最佳实践是使用尽可能多的表示组件。

例子

正如我们在前一章中提到的，我们对表示组件使用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章节相同的功能，惟一的区别是，我们将代码重构为容器和表示组件。

你可以运行该应用程序，并看到如下面的屏幕截图中的文本。