无法将 Props 传递给 React Native 中的另一个组件

Question

我正在 React Native 中创建一个聊天应用程序，但我遇到了一个问题，即state 没有作为道具传递给其他组件。

错误信息：

ReferenceError：未定义道具

我已经在我的其他项目中使用它，这是我唯一一次遇到这个问题。 我将非常感谢您的帮助。

登录.JS：

import React from "react";
import firebase from 'firebase'
import { Platform, StyleSheet, Text, View, TextInput, Button, Alert, Linking } from "react-native";
import Chatroom from "./chatroom";

export default class SignIn extends React.Component {

  constructor(props) {
      super(props)
      this.state = {
        Email: '',
        Password: '',
      }
  }

  signinfunc = () =>{
      const { Email }  = this.state ;
      const { Password } = this.state ;
      firebase.auth().signInWithEmailAndPassword(Email, Password)
      .then((user) => {
      // Signed in
      Linking.openURL('/chatroom')
      })
      .catch((error) => {
       var errorCode = error.code;
       var errorMessage = error.message;
       alert(errorMessage)
      });
      }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
         Sign-In
        </Text>

        <TextInput
          style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
          placeholder=" Enter Email Address"
          //set the value in state.
          onChangeText={Email => this.setState({Email})}
          underlineColorAndroid="transparent"
        />

        <TextInput
          style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
          placeholder=" Enter Password"
          //set the value in state.
          onChangeText={Password => this.setState({Password})}
          underlineColorAndroid="transparent"
        />

        <View style={[{ width: "93%", margin: 15, backgroundColor: "red" }]}>
          <Button
          onPress={this.signinfunc}
          title="Login"
          color="#00B0FF"
          />
        </View>
        <Chatroom email={this.state.Email} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

聊天室.JS：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


export default function Chatroom() {
  return (<>
  <Text> {props.email}</Text>
</>);
}

const styles = StyleSheet.create({

});

Answer 1

Chatroom是 function 组件，因此您应该获取props作为参数。

export default function Chatroom(props) {
  return (<>
     <Text> {props.email}</Text>
  </>);
}

Answer 2

您应该在功能组件中避免使用此关键字，并使用 props 作为参数

export default function Chatroom(props) {
  return (
    <>
      <Text> {props.email}</Text>
    </>
  );
}