React Native - Props - 蝴蝶教程

简述

在上一章中，我们向您展示了如何使用 mutablestate. 在本章中，我们将向您展示如何将状态和props.

展示组件应该通过传递来获取所有数据props. 只有容器组件应该有state.

容器组件

我们现在将了解容器组件是什么以及它是如何工作的。

理论

现在我们将更新我们的容器组件。该组件将处理状态并将道具传递给演示组件。

容器组件仅用于处理状态。所有与视图相关的功能（样式等）都将在演示组件中处理。

例子

如果我们想使用上一章中的示例，我们需要删除Textrender 函数中的元素，因为该元素用于向用户呈现文本。这应该在展示组件内。

让我们回顾一下下面给出的示例中的代码。我们将导入PresentationalComponent并将其传递给渲染函数。

我们导入后PresentationalComponent并将其传递给渲染函数，我们需要传递道具。我们将通过添加传递道具myText = {this.state.myText}和deleteText = {this.deleteText}至<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: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

表示组件

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

理论

展示组件应该只用于向用户展示视图。这些组件没有状态。他们接收所有数据和函数作为道具。

最佳实践是尽可能多地使用演示组件。

例子

正如我们在上一章中提到的，我们使用 EC6 函数语法来表示组件。

我们的组件将接收道具，返回视图元素，使用{props.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章节。唯一的区别是我们将代码重构为容器和展示组件。

您可以运行该应用程序并查看以下屏幕截图中的文本。

如果您单击文本，它将从屏幕上删除。