document.querySelector(); 制作翻转卡"Possibly the object is null"

Question

我试图用tsx在Next.js上制作一个flipcard，但querySelector('.cardflipper'(找不到对象，给了我这个错误："可能该对象为空；。有人知道如何让我的方法识别我的类名，或者用任何其他聪明的方法在tsx上制作flipcard吗？

/components/FlipCard/index.tsx

import { Container } from './styles';
import React from 'react';

function FlipCard() {
const cardflip = document.querySelector('.cardflipper');
cardflip.addEventListener( 'click', function() {
cardflip.classList.toggle('is-flipped');
});

return (
<Container>
<div className="scene">
<div className="cardflipper">
<div className="card__face card__face--front">front</div>
<div className="card__face card__face--back">back</div>
</div>
</div>
</Container>
);
}
export default FlipCard

/components/FlipCard/styled.ts

import styled from 'styled-components';
export const Container = styled.div`

.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.cardflipper {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
`;

Answer 1

只需键入脚本，警告您如果element不存在，querySelector可能会返回null。

如果使用as HTMLDivElement显式分配返回类型，则可以克服此警告。

const cardflip = document.querySelector('.cardflipper') as HTMLDivElement;

更好的选择，您可以使用template ref

import { Container } from './styles';
import React, { useRef, useEffect } from 'react';

function FlipCard() {
const flippingCardRef = useRef()
useEffect(() => {
flippingCardRef.current.addEventListener('click', function() {
flippingCardRef.current.classList.toggle('is-flipped');
});
});

return (
<Container>
<div className="scene">
<div className="cardflipper" ref={flippingCardRef}>
<div className="card__face card__face--front">front</div>
<div className="card__face card__face--back">back</div>
</div>
</div>
</Container>
);
}
export default FlipCard