Javascript 为什么this从我在 ReactJS 中的功能组件返回未定义

发布于06月10日

我还是ReactJS和JavaScript的初学者，在使用this时遇到了问题.

我正在渲染一个属性列表，当我渲染onMouseOver个属性时，我希望得到悬停在this上的元素.但它返回undefined.

你能告诉我为什么会出现这个错误吗？

这是我输入codesandbox.io的代码

提前非常感谢您.

import React from "react";
import "./styles.css";

import Property from "./components/Property";

import { mock } from "./data/mock";

export default function App() {
  const [data] = React.useState(mock.data.dora.exploreV3.sections[2].items);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {data.map((item) => (
        <Property key={item.listing.id} item={item} />
      ))}
    </div>
  );
}

import React from "react";

const Property = ({ item }) => {
  return (
    <div
      style={{
        padding: "5px 0",
        cursor: "pointer"
      }}
      onMouseOver={() => console.log("item: ", this)}
    >
      {item.listing.name}
    </div>
  );
};

export default Property;

import React from "react"; const Property = ({ item }) => { return ( <div style={{ padding: "5px 0", cursor: "pointer" }} onMouseOver={(event) => console.log("item: ", event.target)} > {item.listing.name} </div> ); }; export default Property;

Javascript 为什么this从我在 ReactJS 中的功能组件返回未定义

推荐答案

Javascript相关问答推荐

Toast函数找不到其dis

如何解决(不忽略)reaction详尽的linter规则，而不会在获取数据时导致无限的reender循环

仅在React和JS中生成深色

是什么原因导致此Angular 16应用程序中类型错误时属性结果不存在？

Vue：ref不会创建react 性属性

从PWA中的内部存储读取文件

模块与独立组件

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状？

InDesign—创建一个独立的窗口，在文档中进行更正时保持打开状态

在nextjs服务器端api调用中传递认证凭证

Chromium会将URL与JS一起传递到V8吗？

在拖放时阻止文件打开

如何在输入元素中附加一个属性为checkbox？

Next.js服务器端组件请求，如何发送我的cookie token？

Eval vs函数()返回语义

JavaScript是否有多个`unfined`？

TinyMCE 6导致Data：Image对象通过提供的脚本过度上载

JavaScript：如果字符串不是A或B，则

在Java脚本中构建接口的对象

AstroJS混合模式服务器终结点返回404