将 react-transition-group 与 TypeScript 一起使用时“不安全地分配任何值”

问题描述

我在使用 <_Iterator,_Container> 中的 @typescript-eslint 组件时遇到各种 Transition 错误。

我遵循了官方的 React Transition Group 小示例，但在我的项目中使用了 TypeScript + ESLint，我收到以下错误：react-transition-group。

另一个相关错误是 Unsafe assignment of an any value。

element implicitly has an 'any' type because expression of type 'string' can't be used to index type

const transition = {
  transitionStyles: {
    entering: { opacity: 0,transform: 'translateX(0rem)' },entered: { opacity: 1,exiting: { opacity: 1,transform: 'translateX(2rem)' },exited: { opacity: 0,transform: 'translateX(-2rem)' },unmounted: { opacity: 0,} as { [key: string]: React.Cssproperties },};

解决方法

1. 您需要将 <Transition in timeout={700}> {(state) => ( <div style={{ ...transition.transitionStyles[state] }}> /* ... */ </div> )} </Transition> 变量转换为字符串，因为默认情况下它是一个 state（从 TransitionStatus 声明）：

   react-transition-group

2. 然后继续将 {(state: string) => ( <div style={{ ...transition.transitionStyles[state] }}> /* ... */ </div> )} transitionStyles 转换为类型化对象，该对象为每个 any object 返回一个 key 对象。可以这样做：

   React.CSSProperties