当我使用react-transition-group时，“ TS7017：元素隐式具有'any'类型...没有索引签名”

Question

这是我的代码：

 renderSoundWave = () => {
    const defaultStyle = {
      opacity: 1,
      transition: `opacity ${DURATION}ms ease-in-out`,
    }

    const transitionStyles = {
      entering: { opacity: 1 },
      entered:  { opacity: 0 },
    };
    return (

    <Transition timeout={DURATION} in={this.animate}>
      {(state) => (
        <div className={styles.soundWaves}
             style={{ ...defaultStyle, ...transitionStyles[state]}}> {/* Error here! */
          <SoundWaves/>
        </div>
        )}
    </Transition>
      );
  }

我想使用Transition中的react-transition-group为图标SoundWave设置动画。

但是我遇到此错误：

  

错误TS7017：元素隐式具有“任意”类型，因为类型为“ {   输入：{不透明度：数字； };输入：{不透明度：数字； }; }' 已   没有索引签名。

错误指向上方的...transitionStyles[state]

我不明白为什么会引发此错误。是什么导致此类型错误？

Answer 1

我最终通过将transitionStyles更改为

来解决了该问题

const transitionStyles: { [id: string]: React.CSSProperties } = {
  entering: { opacity: 1 },
  entered:  { opacity: 0 },
};