Reactjs 反应弹簧：将子对象映射到动画会导致样式消失

我正在使用

react

和

react-spring

尝试构建一个幻灯片式的东西，但我认为我的react原则完全是反向的。我的问题是，我想停止接收特定的警告。我将发布我认为是一个节略和可复制的版本

我有三个目标：

• 有一个没有“卸载的反应状态”错误的工作版本
• 有一个语义准确且有效的版本（即，我可读且简单的版本不会中断）
• 在渲染的子对象上使用react-spring样式（到目前为止，我无法这样做）

//marquee.spring.tsx
从“react spring”导入{animated，useTransition}
从“react”导入{Children，useCallback，useState}
从“/defaults”导入{defaultView，defaultConfig}
键入SpringMarqueeProps={…}
//在我的例子中，“儿童”的成员都是s，为了清楚起见
常量SpringMarquee=（{
儿童
config=defaultConfig，
视图：视图=默认视图
}：SpringMarqueeProps）=>{
//存储子计数
const childCount=Children.count（Children）
//提取配置
常量{duration}=config
//生成动画子对象
const animatedChildren=Children.map（Children，（child:JSX.Element）=>{
//案例1:React抱怨子对象是对象，页面不呈现
const Child=已设置动画（子对象）
//案例2:React投诉未安装组件更新，页面未呈现
const Child=animated（（）=>Child）//这是有意义的，因为'Child'是
//我想把生成的“样式”传递给孩子们，但没有证据
//这对我来说完全有效
返回道具=>
})
//分页
const[index，setIndex]=useState（0）
//分页器
const next=useCallback（（）=>setIndex（i=>++i%childCount），[]））
//生成样式
const transition=useTransition（索引，i=>i，{/*..styles*/}）
//间歇
useffect（（）=>{
const int=setInterval（下一步，持续时间）
return（）=>clearInterval（int）
}, [])
//整理
//正是在这里，我努力将生成的样式应用到
//动画儿童`
const Result=props=>(
//奇怪的是，道具被传递到“视图”上，效果很好
{
map（{item，props:style，key}）=>{
//案例3：尽管我通过了'style'，但屏幕上没有显示任何内容
//渲染时DOM中的子对象
const-marqueeeitem=animatedChildren[item]
返回
//案例4：我努力确保道具传递给孩子们
//通过强制它们成为JSX，但仍然没有'style'属性
const Child=animatedChildren[项目]
const-marqueeeitem=props=>
返回
})
}
)
返回
}
导出默认SpringMarquee

上述组件的使用方式如下：

//index.tsx
从“components/dynamic/spring/marquee/marquee.spring”导入SpringMarquee
导出常量索引扩展=（）=>{
返回(
{/*默认道具以静默方式处理*/}
你好
你好
你好吗？
)
}
导出默认索引扩展