Reactjs 获取错误“；TypeError:rangeValue.replace不是函数；尝试使用React-Spring设置动画时

当一个变量变为真时，我尝试设置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>

const styles=useSpring({
发件人：{opacity:0}，
输入：{opacity:1}
})
返回(
//这是我构建的一个组件，它有一个名为toggle的函数，用于设置
关于真或假。
{（{on，toggle}）=>(
春天
{（样式）=>(
{on&&i将淡入}
)}
)}

---

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

您是否尝试过在

动画.h1中不传播
this.styles
变量

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