该代码是否是表示组件/容器组件结构的示例？

Question

我试图使用react-native来构建现代应用程序，但是我对容器/表示组件设计模式的结构感到困惑。我是否按照此代码正确遵循？

在此文件中，“ const = SignIn”表示表示组件，而“ class Login”表示容器组件。

import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, Button, TextInput } from 'react-native';


const SignIn = (props) => (

    <View style={styles.container}>
    <TextInput
      value={props.username}
      onChange={props.handleUserChange}
      style={styles.input}
    />
     <Button
          title={'Test Button'}
          style={styles.input}
          onPress={props.handleButton}
        />
    </View>
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  input: {
    width: 200,
    height: 44,
    padding: 10,
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: 10,
  },
});


class Login extends React.Component {

  handleUserChange(event){
    let text = event.nativeEvent.text;
    this.setState({username:text});
  }

  onLogin() {
    const { username, password } = this.state;

    Alert.alert('Credentials', `${username} + ${password}`);
  }


  constructor() {
    super()
    this.state = {
      username: '',
      password: '',
    }
    this.handleUserChange = this.handleUserChange.bind(this);////
    this.handleButton = this.onLogin.bind(this);
  }

  render(){
    return ( 
        <SignIn username={this.state.username} handleUserChange={this.handleUserChange} handleButton={this.handleButton} />
    );
  }
}

export default Login;