onClick and handleClick functions on a Styled Component with

Question

这是我几天来一直在努力解决的问题。我正在使用React与TypeScript和样式化组件。

我正在尝试移植我最初在p5js中制作的扫雷舰游戏。我正试图弄清楚如何将事件侦听器添加到单元格中。这是一个巨大的混乱，因此在分享我的代码(如果需要(之前，我想问一下如何做到这一点。

我的状态中有任意一组单元格对象(单元格(。每个单元格都是一个StyledCell组件。无论我尝试了什么，我都无法附加onClick属性。我看到了每一个可能的错误。

有人能告诉我怎么做吗？

我在这里为您提供所需的任何其他信息。

编辑：为了更容易理解，简化了我的代码后，我将分享一个有问题的部分：

import React from "react";
import styled from "styled-components";
import { WON, LOST, EMPTY, MINE, DETONATION, FLAG, DIGITS } from "../../emojis";
interface CellProps extends React.HTMLAttributes<HTMLElement> {
num: number;
i: number;
j: number;
mine: boolean;
minesAround: number;
revealed: boolean;
clicked: boolean;
flagged: boolean;
won: boolean;
lost: boolean;
size: string;
// revealCell: (num: number) => Array<CellType>;
// onClick: React.MouseEventHandler<HTMLButtonElement>;
revealCell: (e: React.MouseEvent<HTMLButtonElement>) => void;
// revealCell: (num: number) => void;
}
const StyledCell = styled.div<CellProps>`
width: 38px;
height: 38px;
line-height: 38px;
font-size: 38px;
margin: 1px;
padding: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
`;
export const Cell: React.FC<CellProps> = ({
num,
mine,
minesAround,
revealed,
clicked,
flagged,
won,
lost,
size,
revealCell,
}) => {
function render() {
if (revealed && clicked && mine) {
return DETONATION;
//
}
if (revealed && mine) {
return MINE;
}
if (revealed) {
// If won, empty cells show the happy face
if (won && minesAround === 0) {
return WON;
// If lost, empty cells show the sad face
} else if (lost && minesAround === 0) {
return LOST;
}
// Calculate the number of mines around and draw that
return DIGITS[minesAround];
}
if (flagged) {
return FLAG;
}
return EMPTY;
}
return <StyledCell onClick={revealCell}>{render()}</StyledCell>;
};

行中：

return <StyledCell onClick={revealCell}>{render()}</StyledCell>;

onClick被标记为错误，我得到的错误消息是：

(属性(单击？：(React.MouseEventHandler&React.MouseEventHandler(|未定义没有重载匹配这个电话。重载第1个，共2个，'(props:{i:number；slot？：string|未定义；风格？：CSSProperties |未定义；标题？：字符串|未定义；参考？：((实例：HTMLDivElement|null(=>无效(|参照对象<gt；|null |未定义。。。262更多。。。；revealCell:(e：鼠标事件<gt；(=>void；｝&｛…；｝&｛…；｝(：ReactElement<gt；'，给出以下错误。类型'(e:MouseEvent<HTMLButtonElement，MouseEvent>(=>void"不可分配给类型"MouseEventHandler&MouseEventHandler"。类型'(e:MouseEvent<HTMLButtonElement，MouseEvent>(=>void"不可分配给类型"MouseEventHandler"。参数"e"one_answers"event"的类型不兼容。键入'MouseEvent<HTMLDivElement，鼠标事件>'不可分配给类型"MouseEvent<HTMLButtonElement，鼠标事件>'。类型"HTMLDivElement"缺少类型"HTMLButtonElement"中的以下属性：disabled、form、formAction、，formEnctype，还有13个。过载2，共2个，'(支柱：样式化的组件属性为<quot；div"；，any，CellProps，never，"；div"；，"div">(：ReactElement<样式化的组件属性为<quot；div"；，任何CellProps，从不，"；div"div">，字符串|JSXElementConstructor<gt>'，给出以下错误。类型'(e:MouseEvent<HTMLButtonElement，MouseEvent>(=>void"不可分配给类型"MouseEventHandler&MouseEventHandler'.ts(2769(index.d.ts(1479，9(：所需的类型来自在此处声明的属性"onClick"type'IntrinsicAttributes&｛i:number；slot？：字符串|未定义；风格？：CSSProperties |未定义；标题？：string|undefined；参考？：((实例：HTMLDivElement|null(=>void(|RefObject<gt；|null|未定义。。。262更多。。。；revealCell:(e:MouseEvent<…>(=>无效的}&｛…；｝&｛…；｝'index.d.ts(1479，9(：预期的类型为来自在类型上此处声明的属性"onClick"'本质属性&｛i:number；slot？：字符串|未定义；style？：CSSProperties |未定义；标题？：string|undefined；参考？：((实例：HTMLDivElement|null(=>void(|RefObject<gt；|null|未定义。。。262更多。。。；revealCell:(e:MouseEvent<…>(=>无效的}&｛…；｝&｛…；｝的

我已经尝试了我能想到的任何可能的解决方案。

Answer 1

这个代码沙盒对你有帮助吗？

https://codesandbox.io/s/magical-butterfly-4jjo0n?file=/src/App.tsx

import "./styles.css";
import styled from "styled-components";
const StyledApp = styled.main`
display: flex;
gap: 1rem;
`;
const StyledCell = styled.div`
height: 100px;
width: 100px;
background-color: black;
`;
export default function App() {
const numberOfCells = 10;
return (
<StyledApp>
{[...Array(numberOfCells)].map((_, index) => (
<StyledCell
onClick={() => alert(`you clicked the ${index + 1}nth cell`)}
/>
))}
</StyledApp>
);
}