报告:目前完成度【 0.5/3 】,预计上线时间:【 未知 】 【问卷调查】
英文链接源链接 [6853]
contenteditable="true"

React Native - Props 介绍

在上一章中,我们向您展示了如何使用可变的 state 。在本章中,我们将向您展示如何结合状态和 props 。

演示组件应该通过传递 props 来获取所有数据。仅容器组件应具有状态。

容器组件

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

理论

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

容器组件仅用于处理状态。与视图(样式等)有关的所有功能都将在呈现组件中处理。

Example

如果要使用上一章中的Example,则需要从render函数中删除 Text 元素,因为该元素用于向用户显示文本。这应该在表示组件内部。

让我们在下面给出的Example中查看代码。我们将导入 PresentationalComponent 并将其传递给render函数。

After we import the PresentationalComponent and pass it to the render function, we need to pass the props. We will pass the props by adding myText = {this.state.myText} and deleteText = {this.deleteText} to <PresentationalComponent>. Now, we will be able to access this inside the presentational component.

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

表现成分

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

理论

呈现组件应仅用于向用户呈现视图。这些组件没有状态。他们接收所有数据并作为道具。

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

Example

正如我们在上一章中提到的,我们将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

现在,我们具有与状态一章相同的功能。唯一的区别是我们将代码重构为容器和表示组件。

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

React Native Props

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

React Native Props updated
点我分享笔记