Javascript 利用'；这'；在React Js中

我有一个经典的Functional组件，返回将在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>

        )
}

函数搜索（）{
常数loadFilms=函数（）{
console.log（this））；//未定义日志
};
返回(
{console.log（this）；loadFilms（）；}}}/>//未定义日志
item.id.toString（）}
renderItem={（{item}）=>}
/>
)
}

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

---

感谢您的解释：）

我相信您弄错了，因为您的函数没有扩展组件类

react组件将以声明开头，如下所示：

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

类应用程序扩展组件{
渲染（）{
返回(
你好，世界！
)
}
}

---

类组件是函数，但函数不是扩展组件类

原因是

loadFilms

是一个不同于您的“类”的函数。因此，它在这一背景下具有不同的含义。因为您似乎使用了，所以它没有定义。您可以使用该方法显式地传递它

函数搜索（）{
常数loadFilms=函数（）{
console.log（this））；//未定义日志
};
返回(
{console.log（this）；loadFilms.call（this）；}}}/>//未定义日志
item.id.toString（）}
renderItem={（{item}）=>}
/>
)
}

类只是语法上的糖。我不使用react-native，所以请原谅我这里的元素不在，但在react中，类实际上与所谓的功能组件完全不同。因为您正在从react库扩展类组件，所以它的行为将有所不同。在JavaScript中，函数中的“this”指的是什么取决于调用函数的位置，但如果函数是从组件类扩展而来的，那么它将引用该类，就像它绑定到它一样（我相信）。我将编辑我的注释，但我等待的时间太长了。我对装订的看法是错误的。组件类“this”将用于绑定方法（除非在声明中使用了胖箭头函数）。我不太了解这个，因为我只使用JS几年了。对不起，也许我在这里太苛刻了。我有点脱离了使用react的上下文。从OP->Class搜索扩展了react.Component{}，您可能需要阅读。本质上，它检查

isReactComponent

属性，该属性仅在您从

React.Component

继承时存在。非常有用的链接。非常感谢。

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.call(this);} } />  // logs undefined
                <FlatList    
                data={films}
                keyExtractor = {item => item.id.toString()}
                renderItem={({item}) => <FilmItem filmDesc = {item} />} 
                />
            </View>

        )
}