Question

我购买了有关Udemy的React-Native课程，而教React-Native的人则使用{...this.props}。但这对我没有用。这是错误消息。

TypeError：未定义不是对象（正在评估'_this.props'）

我该怎么办？

LoginForm.js

import React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import Input from '../components/Input';
const LoginForm: () => React$Node = () => {
  return (
    <>
      <View>
        <Text style={styles.signInText}>SIGN IN</Text>
        <Input 
          placeholder="Username"
        />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  signInText:{
    fontWeight:'bold',
    marginVertical:25,
    color:'#189BDD'
  }
});

export default LoginForm;

Input.js

import React from 'react';
import { StyleSheet, ScrollView, View, TextInput, Image } from 'react-native';
const Input: () => React$Node = () => {
  return (
    <>
      <View>
        <TextInput
          {...this.props}
        />
      </View>
    </>
  );
};

const styles = StyleSheet.create({});

export default Input;

Udemy老师SS

Answer 1

this在功能组件上不存在。在功能组件中，您可以将props作为尚未传递的参数进行访问。

const Input = (props) => {

...

  <TextInput
    {...props}
  />
}

Answer 2

创建React组件有两种方法：类或函数。

Input是一个功能组件，而不是类组件。

这意味着props作为参数传递给函数，而不是作为类实例的属性传递。 this不在功能组件中使用，仅在类组件中使用。

因此像这样贴花您的功能组件：

const Input = (props) => {

然后散布这样的道具：

{...props}

如何在功能组件中使用{... this.props}

2 个答案: