Javascript Spring动画在ReactJS中不起作用

下面的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>
        )
    }
}

从“React”导入React；
从“react”导入{Component}
从'react Spring'导入{Spring}
导出默认类菜单扩展组件{
建造师（道具）{
超级（道具）；
this.state={isMouseOver:false}；
this.handleMouseEnter=this.handleMouseEnter.bind（this）；
this.handleMouseLeave=this.handleMouseLeave.bind（this）；
}
HandleMouseCenter（e）{
this.setState（{isMouseOver:true}）；
}
手袋{
this.setState（{isMouseOver:false}）；
}
LogoText（道具）{
const isMouseOver=props.isMouseOver；
const handleMouseEnter=props.handleMouseEnter；
const handleMouseLeave=props.handleMouseLeave；
如果（结束）{
返回(
{
（道具）=>(
悬停
)
}
)
}否则{
返回(
)
}
}
render（）{
返回(





)
}
}

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

解决方案：

---

这是因为Spring版本9。对于任何有这样一个问题的人，只需卸载最新的spring，npm i会做出反应吗-spring@8.0.20

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

---

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

如2021年3月和中所述，尚未发布，可能已经更改。因此，使用V8是安全的

但是，在V9中，动画使用

useSpring

hook和

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>
  )
}

import{useSpring，animated}来自'react spring'//使用V9中的挂钩
函数LogoText（{isMouseOver，handleMouseEnter，handleMouseLeave}）{
const style=useSpring({
不透明度：isMouseOver？1:0，
发件人：{opacity:0}，
})
如果（！isMouseOver）{
返回(
)
}
返回(
)
}

谢谢你的引导，但你认为这是因为这个吗？是的。我创建了一个新组件LogoText，不幸的是，它的行为与此相同。另外，我在arrow函数中执行了

{console.log（props.opacity）}

，下面是输出：

SpringValue{id:1，key:opacity'，_priority:0，_children:Set（0），animation:animation，}

如果失败，您使用的是什么版本的react spring？看起来您需要从“react Spring/renderprops”导入Spring，V9的docks中提到了它，它统一了一个模块下的api，但它还没有发布？您是对的，不需要在那里，但悬停文本会随着鼠标的输入/左移而出现/消失，因此事件正常工作，但我把它拿走了，因为它没用。但问题依然存在。另外，当我尝试导入spring/renderprops时，会得到一个错误，即不存在这样的文件。是否有npm安装命令？可能是因为您使用的版本9不再具有/renderprops，请检查您的package.json以获取该版本？如果你看这里，它解释说，版本9可能有突破性的变化，可以看看它是否与版本8？是的，我使用的是版本9。我会尝试版本8，我会让你知道。是的，这是因为那个版本。在版本8中，它工作得非常完美。真不敢相信我花了将近3个小时才弄明白为什么它不工作，这是因为版本9坏了。非常感谢你。非常感谢您的帮助。谢谢，但我可能会坚持使用V8，因为使用组件类比使用组件函数更舒服。好的。另外，最好等到V9正式发布并稳定后再使用。在此之前，我们应该使用V8。