Javascript 我是否正确使用样式化组件？

我的App.js开始看起来很长了，我开始怀疑我是否按照预期的方式使用了样式化组件

import React, { Component } from "react";
import "./App.scss";
import styled, { keyframes } from "styled-components";
import { TweenMax, TweenLite, Power2, TimelineLite } from "gsap";
import NameSvg from "./name";
import Nav from "./Nav";
import Player from "./Player";

class App extends Component {
  nav = null;
  hero = null;
  welcome = null;
  wrapper = null;
  scroll = null;
  name = null;
  tl = new TimelineLite({ paused: true });
  lis = [];
  welcomeTxt = [];

  changePlayingState = () => {
    this.setState({ playing: !this.state.playing });
  };

  state = {
    liText: [{ li: "My Work", id: 1 }, { li: "About Me", id: 2 }],
    welcomeTxt: [{ word: "Hello", id: 1 }, { word: "I'm", id: 2 }],
    playing: false
  };

  componentDidMount() {
    this.tl
      .staggerTo(this.welcomeTxt, 0.9, { opacity: 1, y: 70 }, 0.1)
      .staggerTo(
        this.welcomeTxt,
        0.9,
        { visibility: "visible", opacity: 0, delay: 0.5 },
        "prev"
      )
      .to(this.name, 0.9, { y: 350, x: -400 }, "prev+=.5")
      .to(this.nav, 0.9, { opacity: 1 }, "prev+=.5")
      .to(this.hero, 0.9, { opacity: 1 }, "p rev+=.9")
      .staggerTo(this.lis, 0.9, { opacity: 1, x: 20 }, "prev+=.9")
      .to(this.music, 0.9, { opacity: 1 }, "prev+=2")
      .to(this.scroll, 0.9, { visibility: "visible" }, "prev+=2");

    this.tl.play();
  }

  render() {
    return (
      <Wrapper ref={div => (this.wrapper = div)}>
        <Nav ref={div => (this.nav = div)}>
          Logo
          <ul>
            {// map through the elements
            this.state.liText.map((element, index) => (
              <a href="#">
                <li key={index} ref={li => (this.lis[index] = li)}>
                  {element.li}
                </li>
              </a>
            ))}
          </ul>
          <Logo />
        </Nav>
        <Welcome ref={div => (this.welcome = div)}>
          {// map through the elements
          this.state.welcomeTxt.map((element, index) => (
            <div
              className={`welcome${index}`}
              key={index}
              ref={div => (this.welcomeTxt[index] = div)}
            >
              {element.word}
              <br />
            </div>
          ))}
          <Name ref={div => (this.name = div)}>
            <NameSvg className="namesvg" />
          </Name>
        </Welcome>

        <Music ref={div => (this.music = div)}>
          <ToolTip>
            pst..could i interest you in some music for your stay?
            <button className="noThanks">No..thanks</button>
          </ToolTip>
          <a href="#" onClick={this.changePlayingState}>
            {this.state.playing ? (
              <img
                src="https://img.icons8.com/material/48/000000/circled-pause.png"
                key={"pause"}
              />
            ) : (
              <img
                src="https://img.icons8.com/material-rounded/48/000000/circled-play.png"
                alt="play button"
                key={"play"}
                className="playButton"
              />
            )}
          </a>
          {this.state.playing ? <Player playing={this.state.playing} /> : null}
        </Music>

        <Scroll ref={div => (this.scroll = div)}>
          <div className="one" />
          <div className="two" />
          <div className="three" />
        </Scroll>
        <Enter />
        <Hero ref={div => (this.hero = div)} className="hero" />
      </Wrapper>
    );
  }
}

export default App;

const building = keyframes`
  0% {
    left: 0;
    width:0;
    opacity:1;
  } 
  50%{
    left:0;
    width:70%;
    opacity:.7
  }
  100% {
    left: 70%;
    width:0;
    opacity:0;
  }
`;

const Wrapper = styled.div`
  display: grid;
  background: #f8f8f8;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  font-family: "Roboto Condensed", sans-serif;
  transform: translateX(-15px);
  overflow: hidden;
`;

const Logo = styled.div``;

const appear = keyframes`
  0% {
    opacity:0
  } 
  50%{
    opacity:.7
  }
  100% {
    opacity:1;
  }
`;

const Name = styled.div`
  position:absolute;
  top:-6%;
  left:-12%;
  height:300%;
  grid-column: 1/5;
  grid-row: 9/13;
  z-index: 3;
  }
`;

const Music = styled.div`
  opacity: 0;
  grid-column: 11/13;
  grid-row: 1/2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 3em;
  position: relative;
`;

const ToolTip = styled.div`
  ${"" /* visibility: hidden; */}
  position: absolute;
  height: auto;
  padding: 0.3em;
  width: auto;
  bottom: 5.5em;
  border: 0.3px solid black;
  left: -1em;
`;

const Scroll = styled.div`
  visibility: hidden;
  grid-column: 11/13;
  grid-row: 6/9;
  display: flex;
  ${"" /* flex-direction: column; */}
  justify-content: center;

  & .one {
    height: 10px;
    width: 10px;
    background: black;
    border-radius: 50%;
    margin-right: 0.5em;
  }

  & .two,
  .three {
    height: 10px;
    width: 10px;
    background: transparent;
    border: 0.5px solid black;
    border-radius: 50%;
    margin-right: 0.5em;
  }
`;

const Enter = styled.div`
  opacity: 0;
  background: white;
  grid-column: 11/13;
  grid-row: 9/13;
`;

const Hero = styled.div`
  opacity: 0;
  grid-column: 4/12;
  grid-row: 1/12;
  transform: translate(-20%, 20%);

  &:before {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    height: 100%;
    width: 0%;
    display: block;
    animation: ${building} 1s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
  }
`;

const Welcome = styled.div`
  position: relative;
  transform: translate(100px, 100px);
  font-family: Neou-Thin;
  font-size: 100px;
`;

import React，{Component}来自“React”；
导入“/App.scss”；
从“样式化组件”导入样式化的{关键帧}；
从“gsap”导入{TweenMax、TweenLite、Power2、TimelineLite}；
从“/name”导入NameSvg；
从“/Nav”导入Nav；
从“/Player”导入播放器；
类应用程序扩展组件{
导航=空；
hero=null；
欢迎=null；
包装器=null；
滚动=空；
name=null；
tl=新的时间线（{暂停：真}）；
lis=[]；
WelcomeText=[]；
changePlayingState=（）=>{
this.setState（{playing:！this.state.playing}）；
};
状态={
liText:[{li:“我的工作”，id:1}，{li:“关于我”，id:2}]，
WelcomeText:[{word:“你好”，id:1}，{word:“我是”，id:2}]，
播放：错误
};
componentDidMount（）{
这个是.tl
.staggetto（this.welcomeTxt，0.9，{opacity:1，y:70}，0.1）
.蹒跚而行(
这是Welcomext，
0.9,
{可见性：“可见”，不透明度：0，延迟：0.5}，
“上一个”
)
.to（this.name，0.9，{y:350，x:-400}，“prev+=.5”）
.to（this.nav，0.9，{opacity:1}，“prev+=.5”）
.to（this.hero，0.9，{opacity:1}，“p rev+=.9”）
.staggetto（this.lis，0.9，{opacity:1，x:20}，“prev+=.9”）
.to（this.music，0.9，{opacity:1}，“prev+=2”）
.to（this.scroll，0.9，{visibility:“visible”}，prev+=2）；
这个。tl。play（）；
}
render（）{
返回(
（this.wrapper=div）}>
（this.nav=div）}>
标志

{//通过元素映射
this.state.liText.map（（元素，索引）=>(
))}

（this.welcome=div）}>
{//通过元素映射
this.state.WelcomeText.map（（元素，索引）=>(
（this.welcomeTxt[index]=div）}
>
{element.word}


))}
（this.name=div）}>
（this.music=div）}>
pst.我能为您的停留为您带来一些音乐吗？
不，谢谢
{this.state.playing？：null}
（this.scroll=div）}>
（this.hero=div）}className=“hero”/
);
}
}
导出默认应用程序；
const building=关键帧`
0% {
左：0；
宽度：0；
不透明度：1；
} 
50%{
左：0；
宽度：70%；
不透明度：.7
}
100% {
左：70%；
宽度：0；
不透明度：0；
}
`;
const Wrapper=styled.div`
显示：网格；
背景：#f8f8；
高度：100vh；
网格模板列：重复（12，1fr）；
网格模板行：重复（12，1fr）；
字体系列：“机器人浓缩”，无衬线；
转换：translateX（-15px）；
溢出：隐藏；
`;
const Logo=styled.div``；
常量显示=关键帧`
0% {
不透明度：0
} 
50%{
不透明度：.7
}
100% {
不透明度：1；
}
`;
const Name=styled.div`
位置：绝对位置；
前-6%；
左-12%；
身高：300%；
网格柱：1/5；
网格行：9/13；
z指数：3；
}
`;
const Music=styled.div`
不透明度：0；
网格柱：11/13；
网格行：1/2；
显示器：flex；
证明内容：中心；
调整项目：灵活启动；
边缘顶端：3em；
位置：相对位置；
`;
常量工具提示=styled.div`
${“/*可见性：隐藏；*/}
位置：绝对位置；
高度：自动；
填充：0.3em；
宽度：自动；
底部：5.5em；
边框：0.3倍纯黑；
左：-1米；
`;
const Scroll=styled.div`
可见性：隐藏；
网格柱：11/13；
网格行：6/9；
显示器：flex；
${“/*弹性方向：列；*/}
证明内容：中心；
&.一{
高度：10px；
宽度：10px；
背景：黑色；
边界半径：50%；
右边距：0.5em；
}
&.2，
.三{
高度：10px；
宽度：10px；
背景：透明；
边框：0.5px纯黑；
边界半径：50%；
右边距：0.5em；
}
`;
const Enter=styled.div`
不透明度：0；
背景：白色；
网格柱：11/13；
网格行：9/13；
`;
const Hero=styled.div`
不透明度：0；
网格柱：4/12；
网格行：1/12；
转换：翻译（-20%，20%）；
&：之前{
内容：“；
位置：绝对位置；
背景：rgba（0,0,0,0.9）；
身高：100%；
宽度：0%；
显示：块；
动画：${building}1s；
动画延迟：3s；
动画填充模式：正向；
}
`;
const Welcome=styled.div`
位置：相对位置；
转换：转换（100px，100px）；
字体系列：Neou-Thin；
字体大小：100px；
`;

我想知道我该如何将这些分支到他们自己的文件中。。。 我正在使用GSAP制作动画，当我尝试将内容分支到它们自己的文件时，要么动画停止工作，要么出现错误，比如“cannot tween null”

我尝试将导航分支到它自己的文件的示例：

import React, { Component } from "react";
import styled, { keyframes } from "styled-components";

class Nav extends Component {
  render() {
    return <Navigation />;
  }
}

export default Nav;

const Navigation = styled.div`
  opacity: 0;
  color: black;
  padding: 2em;
  grid-column: 1 / 3;
  grid-row: 1/6;
  font-family: Neou-Bold;

  & ul {
    list-style: none;
    padding: 0;
    margin-top: 3em;
    font-size: 1.1em;
  }

  & a {
    text-decoration: none;
    color: black;
  }
  & li {
    opacity: 0;
    padding-bottom: 0.5em;
  }
`;

import React，{Component}来自“React”；
从“样式化组件”导入样式化的{关键帧}；
类Nav扩展组件{
render（）{
返回；
}
}
导出默认导航；
const Navigation=styled.div`
不透明度：0；
颜色：黑色；
填料：2米；
网格柱：1/3；
网格行：1/6；
字体系列：Neou粗体；
&保险商实验室{
列表样式：无；
填充：0；
边缘顶端：3em；
字体大小：1.1米；
}
&a{
文字装饰：无；
颜色：黑色；
}
&李{
不透明度：0；
垫底：0.5em；
}
`;

执行此操作时，动画不起作用。

代码拆分 考虑到何时将组件拆分为新文件，您可能应该经常这样做，无论是为了可读性还是代码重用。你的

App.js

确实有点夸张。据我所知，您使用的是

样式化组件

很好，但是当您在一个pl中有这么多组件时，建议将它们放在单独的文件中