在 React Js 中使用“this”

Question

我有一个经典的功能组件返回将在 JSX 中呈现的内容

function Search(){

    const loadFilms = function (){
         console.log(this)); // logs undefined
    };

    return(

            <View style= {styleAreas.view}>
                <TextInput style= {styleAreas.textinput} placeholder='Type your movie ' />
                <Button title='Search' onPress= {()=> { console.log(this);loadFilms();} } />  // logs undefined
                <FlatList    
                data={films}
                keyExtractor = {item => item.id.toString()}
                renderItem={({item}) => <FilmItem filmDesc = {item} />} 
                />
            </View>

        )
}

所以我正在学习 JS/React，我不明白为什么这是未定义的，但是当我们运行它时，因为类搜索扩展了 React.Component {}。它返回正确的实例。特别是我认为在 JS 中（我可能过于简化了）一个类是一个具有预配置原型等的函数......

谢谢你的解释:)

Answer 1

我相信您错了，因为您的函数没有扩展 Component 类。

React 组件类将以如下声明开头：

class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

类组件是函数，但您的函数并未扩展组件类。