Javascript gsap，react-无法在空目标之间切换

接下来，我尝试使用typescript实现一个类似的组件

我的组成部分：

import React, { Component } from "react";
import TransitionGroup from "react-addons-transition-group";
import { TweenMax } from "gsap";

import { tableOfContentsData } from "../mockData/tableOfContents";
import { Chapter } from "../types/data/tableOfContents";

import styled from "styled-components";
import { pallete } from "../constants/pallete";

type State = {
  isExpanded: boolean;
};

const StyledContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em;
  background-color: ${pallete.primary};
  color: ${pallete.text};
  font-size: 16px;
  height: 100vh;
  max-width: 200px;
  .chapter-link {
    min-height: 24px;
    min-width: 54px;
    margin-bottom: 1em;
  }
  .close-btn {
    background-color: ${pallete.secondary};
    position: absolute;
    top: 0;
    right: -54px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
  }
`;

class TableOfContents extends Component<{}, State> {
  state = {
    isExpanded: true
  };

  toggleExpanded = (): void => {
    this.setState({
      isExpanded: !this.state.isExpanded
    });
  };

  render() {
    return (
      <StyledContainer>
        <TransitionGroup>
          {this.state.isExpanded && <ChaptersList />}
        </TransitionGroup>
        <div className="close-btn" onClick={this.toggleExpanded}>
          &lt;
        </div>
      </StyledContainer>
    );
  }
}

class ChaptersList extends Component {
  componentWillEnter(callback: any) {
    const el = (this as any).container;
    TweenMax.fromTo(
      el,
      0.3,
      { x: -100, opacity: 0 },
      { x: 0, opacity: 1, onComplete: callback }
    );
  }

  componentWillLeave(callback: any) {
    const el = (this as any).container;
    TweenMax.fromTo(
      el,
      0.3,
      { x: 0, opacity: 1 },
      { x: -100, opacity: 0, onComplete: callback }
    );
  }

  render() {
    return (
      <div>
        {tableOfContentsData.map((chapter: Chapter, i: number) => (
          <div key={i} className="chapter-link">
            {chapter.title}
          </div>
        ))}
      </div>
    );
  }
}

export default TableOfContents;

import React，{Component}来自“React”；
从“react addons transition group”导入TransitionGroup；
从“gsap”导入{TweenMax}；
从“./mockData/tableOfContents”导入{tableOfContentsData}”；
从“./types/data/tableOfContents”导入{Chapter}”；
从“样式化组件”导入样式化；
从“./constants/pallete”导入{pallete}；
类型状态={
isExpanded：布尔型；
};
const StyledContainer=styled.div`
位置：固定；
排名：0；
左：0；
填充：1em；
背景色：${pallete.primary}；
颜色：${pallete.text}；
字体大小：16px；
高度：100vh；
最大宽度：200px；
.章节链接{
最小高度：24px；
最小宽度：54px；
边缘底部：1米；
}
.关闭btn{
背景色：${pallete.secondary}；
位置：绝对位置；
排名：0；
右：-54px；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：54px；
}
`;
类TableOfContents扩展了组件{
状态={
isExpanded：是的
};
toggleExpanded=（）：void=>{
这是我的国家({
isExpanded:！this.state.isExpanded
});
};
render（）{
返回(
{this.state.isExpanded&}
);
}
}
类ChaptersList扩展了组件{
componentWillEnter（回调：任意）{
const el=（此为任意）。容器；
TweenMax.fromTo(
埃尔，
0.3,
{x:-100，不透明度：0}，
{x:0，不透明度：1，onComplete:callback}
);
}
组件将离开（回调：任意）{
const el=（此为任意）。容器；
TweenMax.fromTo(
埃尔，
0.3,
{x:0，不透明度：1}，
{x:-100，不透明度：0，onComplete:callback}
);
}
render（）{
返回(
{tableOfContentsData.map（（章节：章节，i:编号）=>(
{章节标题}
))}
);
}
}
导出默认目录；

当我单击

.close btn

div时，我得到以下错误：

未捕获异常：无法在空目标之间切换

---

我在谷歌搜索过程中发现的一个可能的错误是

TweenMax

导入，但是如果我试图从

gsap/TweenMax

导入它，ts会抱怨缺少类型定义（我安装了

@types/gsap

。

您当前没有在

章节列表中设置
这个容器，因此，
el
将是未定义的。这应该通过最外层的
div
上的
ref
来处理

章节列表的
呈现应该如下所示：

render() {
    return (
      <div ref={c => (this as any).container = c}>{/* this is the change */}
        {tableOfContentsData.map((chapter: Chapter, i: number) => (
          <div key={i} className="chapter-link">
            {chapter.title}
          </div>
        ))}
      </div>
    );
  }

render（）{
返回(
（这是任意的）。container=c}>{/*这是更改*/}
{tableOfContentsData.map（（章节：章节，i:编号）=>(
{章节标题}
))}
);
}
您当前没有在
章节列表中执行任何操作来设置
此.container
，因此
el
将是未定义的。这应该通过最外层的
div
上的
ref
来处理

章节列表的
呈现应该如下所示：

render() {
    return (
      <div ref={c => (this as any).container = c}>{/* this is the change */}
        {tableOfContentsData.map((chapter: Chapter, i: number) => (
          <div key={i} className="chapter-link">
            {chapter.title}
          </div>
        ))}
      </div>
    );
  }

render（）{
返回(
（这是任意的）。container=c}>{/*这是更改*/}
{tableOfContentsData.map（（章节：章节，i:编号）=>(
{章节标题}
))}
);
}