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

Question

我在 Udemy 上购买了 React-Native 类(class)，教授 React-Native 的人使用了 {...this.props}。 但这对我不起作用。这是错误消息。

TypeError: undefined is not an object(evaluating '_this.props')

我应该做什么？

登录表单.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; 

输入.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}
  />
}