尝试使用 React-Spring 进行动画处理时出现错误“TypeError: rangeValue.replace is not a function”答案

【问题标题】：Getting error "TypeError: rangeValue.replace is not a function" when attempting to animate using React-Spring尝试使用 React-Spring 进行动画处理时出现错误“TypeError: rangeValue.replace is not a function”
【发布时间】：2020-07-10 14:00:39
【问题描述】：

当变量变为真时，我正在尝试为 h1 设置动画。

这里有一些代码：

  const styles = useSpring({
    from: {opacity: 0},
    enter: {opacity: 1}
  })
  return (
         <Toggle> // this is a component I have built, it has a function in it called toggle, which sets 
                     on to true or false.
            {({on, toggle}) => (
              <Fragment>
                <button onClick={toggle}>Spring</button>
                {(styles) => (
                  <Fragment>
                    {on && <animated.h1 style={{...this.styles}}>i will fade in</animated.h1>}
                  </Fragment>
                )}
              </Fragment>
            )}
          </Toggle>

我已阅读文档但找不到解决方案。

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

您是否尝试过不将this.styles 变量传播到animated.h1？

当我尝试为布尔值设置动画（从真到假）时，我遇到了同样的错误，然后我意识到它可以从 1 转换为 0。

【讨论】：