春季动画在ReactJS中不起作用

Question

下面的Spring动画在ReactJS中不起作用。

我有一个组件类是这样写的：

import React from "react";
import { Component } from 'react'
import { Spring } from 'react-spring'
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = { isMouseOver: false };
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
}
handleMouseEnter(e) {
this.setState({ isMouseOver: true });
}
handleMouseLeave() {
this.setState({ isMouseOver: false });
}
LogoText(props) {
const isMouseOver = props.isMouseOver;
const handleMouseEnter = props.handleMouseEnter;
const handleMouseLeave = props.handleMouseLeave;
if (isMouseOver) {
return (
<Spring
from={{ opacity: 0 }}
to={{ opacity: 1 }}
>
{
(props) => (
<div style={props}>
hover<!--this renders fine-->
<div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<span><a href='#' style={{ color: '#d8f3dc' }} >dWare.sk</a></span>
<a href='#' style={{ color: '#95d5b2' }}>dWare.sk</a>
</div>
</div>
)
}
</Spring>
)
} else {
return (
<div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<span><a href='#' style={{ color: '#d8f3dc' }} >dWare.sk</a></span>
<a href='#' style={{ color: '#95d5b2' }}>dWare.sk</a>
</div>
)
}
}
render() {
return (
<div className='upperDiv'>
<this.LogoText
isMouseOver={this.state.isMouseOver}
handleMouseEnter={this.handleMouseEnter}
handleMouseLeave={this.handleMouseLeave}
/>
<div className='lowerDiv'>
<ul className='lowerDivMenu'>
<li><a href='#'>O MNE</a></li>
<li><a href='#'>MOJE PORTFÓLIO</a></li>
<li><a href='#'>KONTAKT</a></li>
</ul>
</div>
</div>
)
}
}

但如果我把鼠标悬停在上面的DivLogoText上，它什么都不会做。关于如何解决这个问题，有什么建议吗？

解决方案：这是因为Spring版本9。对于任何有这样问题的人，只需卸载最新的spring并执行npm ireact-spring@8.0.20

Answer 1

可能是onMouseLeave在onMouseEnter之后的第一个div上被触发，因为它已卸载，因此导致它看起来好像什么都没发生？

难道你不想让onMouseEnter在第一个上，onMouseLeave只在第二个上，而不是两者都在吗？

Answer 2

与2021年3月一样，正如本答案下的评论中所提到的，反应弹簧V9尚未发布，可能发生了断裂变化。因此，使用V8是安全的。

但是，在V9中，动画使用useSpring钩子和animated.div:

示例：

import { useSpring, animated } from 'react-spring' // Using hooks in V9
function LogoText({ isMouseOver, handleMouseEnter, handleMouseLeave }) {
const style = useSpring({
opacity: isMouseOver ? 1 : 0,
from: { opacity: 0 },
})
if (!isMouseOver) {
return (
<div
className="upperDivLogoText" onMouseEnter={handleMouseEnter}
>
<span>
<a href="#" style={{ color: '#d8f3dc' }}>
dWare.sk
</a>
</span>
<a href="#" style={{ color: '#95d5b2' }}>
dWare.sk
</a>
</div>
)
}
return (
<animated.div style={style}>
<div
className="upperDivLogoText" onMouseLeave={handleMouseLeave}
>
<span>
<a href="#" style={{ color: '#d8f3dc' }}>
dWare.sk
</a>
</span>
<a href="#" style={{ color: '#95d5b2' }}>
dWare.sk
</a>
</div>
</animated.div>
)
}