react-spring：将儿童映射到动画，导致样式消失

如何解决react-spring：将儿童映射到动画，导致样式消失

我正在使用react和react-spring来尝试构建具有幻灯片显示效果的东西，但是我认为我的React原理全都倒过来了。我的问题是我想停止接收特定的警告。我将发布我认为是精简且可复制的版本。

我在这里有三个目标：

• 有一个工作版本，没有“未安装React状态”错误
• 有一个语义上正确的版本可以正常工作（即我的可读和简单版本不会损坏）
• 在渲染的子代上具有react-spring样式（到目前为止，我还无法做到）

// marquee.spring.tsx
import { animated,useTransition } from "react-spring"
import { Children,useCallback,useState } from "react"
import { defaultview,defaultConfig } from "./defaults"

type SpringMarqueeProps = {...}

// In my case,members of `children` are all <div />s,for clarity

const SpringMarquee = ({ 
  children,config     = defaultConfig,view: View = defaultview
}: SpringMarqueeProps) => {

  // Store child count
  const childCount = Children.count(children)
  // Extract config
  const { duration } = config

  // Generate animated children
  const animatedChildren = Children.map(children,(child: JSX.Element) => {
    // Case 1: React complains about children being objects,page does not render
    const Child = animated(child)
    // Case 2: React complains about an unmounted component update,page does render
    const Child = animated(() => child) // this makes sense as `child` is <div />

    // I want to pass the `styles` generated to the children but there is no evidence
    // that this works at all for me
    return props => <Child {...props} />
  })

  // Pagination
  const [index,setIndex] = useState(0)
  // Paginator
  const next = useCallback(() => setIndex(i => ++i % childCount),[])
  // Generating styles
  const transition = useTransition(index,i => i,{/*...styles*/})

  // Interval
  useEffect(() => {
    const int = setInterval(next,duration)
    return () => clearInterval(int)
  },[])

  // Tidying up

  // It is here that I am struggling to apply the generated styles to
  // the `animatedChildren`
  const Result = props => (
    // In an odd twist,props are passed to `View` just fine
    <View {...props}>
      {
        transitions.map(({ item,props: style,key }) => {
          // Case 3: Despite me passing `style`,nothing appears on the
          // children in the DOM when they render
          const MarqueeItem = animatedChildren[item]
          return <MarqueeItem key={key} style={style} />
          
          // Case 4: I try to ensure props are passed to the children
          // by forcing them to be JSX,but still no `style` attribute
          const Child = animatedChildren[item]
          const MarqueeItem = props => <Child {...props} />
          return <MarqueeItem key={key} style={style} />
        })
      }
    </View>
  )
  
  return <Result />
}

export default SpringMarquee

上面的组件被这样使用：

// index.tsx
import SpringMarquee from "components/dynamic/spring/marquee/marquee.spring"

export const IndexPage = () => {
  return (
    <SpringMarquee>
      {/* default props are handled silently */}
      <div>Hello</div>
      <div>Hi</div>
      <div>How are you?</div>
    </SpringMarquee>
  )
}

export default IndexPage