TypeError：无法设置未定义或空引用的属性“道具” - 反应原生组件

Question

我是 React Native 的新手。当我检查我的代码时，我正在从组件中学习但仍然得到错误的道具，即使在文档中使用道具组件反应本机，因为我正在使用但为什么仍然得到错误检查文档链接（https://facebook.github.io/react-native/docs/props）

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

    class UserInformation extends Component(){
      render(){
        return(
          <View>
            <Text>{this.props.Name}</Text>
            <Text>{this.props.Status}</Text>
          </View>
        );
      }

}

function App() {

  return (
    <View style={styles.container}>

       <UserInformation Name='Hamza' Status='Single' />
       <UserInformation Name='Shahwar' Status='Comitted' />
    </View>
  );
}

export default App;

错误：TypeError：无法设置未定义或空引用的属性“props”

Answer 1

您不能extend 功能组件。相反，在我看来，这是一个拼写错误：

class UserInformation extends Component{
                            //--------^^-------remove ()

Answer 2

如果您使用的是类组件，则需要更改

class UserInformation extends Component(){

到

class UserInformation extends React.Component{

并添加

constructor(props) {
 super(props) // <---- this is the part which give you this.props
}

但是……我建议你使用像 App() 这样的函数组件

const UserInformation = (props) => {
        return(
          <View>
            <Text>{props.Name}</Text>
            <Text>{props.Status}</Text>
          </View>
        );
}