Javascript 根据条件重复代码以显示视频元素

根据命令，我需要显示视频元素。我的意思是，用例类似于如果1，那么只有采访者（ER）视频，如果2，那么采访者（EE）视频，如果3，那么都是视频，如果4，那么都有powerpoint作为背景。要显示视频元素，我需要在正在侦听套接字的

componentDidMount

中使用ref来添加流以获取视频元素

我这样做是因为代码重复太多

const Frame1 = styled.div`
  background: #6f729b;
  text-align: center;
  > video {
    width: 100%;
    object-fit: cover;
  }
`;
const Frame2 = styled.div`
  > video {
    width: 400px;
    height: auto;
  }
`;

const Frame3 = styled.div`
  > video {
    width: 400px;
    height: auto;
  }
`;

const user = JSON.parse(localStorage.getItem("user"));

const Studio = ({ localRef, remoteRef, ...props }) => {
  const [hotkeys, setHotkeys] = React.useState("event1");
  React.useEffect(() => {
    return () => {
      window.ipcRenderer.removeAllListeners("eventListened");
    };
  }, []);
  React.useEffect(
    () => {
      if (
        isElectron() &&
        props.clientJoined &&
        (user !== null && user.data.isInteviewer)
      ) {
        window.ipcRenderer.on("eventListened", (event, hotkeys) => {
          setHotkeys(hotkeys);
        });
      }
    },
    [props.clientJoined]
  );

  console.log("remoteRef", props.clientJoined);
  const renderVideo = () => {
    // const { hotkeys, localRef, remoteRef } = props;
    console.log("hotkeys", hotkeys);
    switch (hotkeys) {
      // ER and EE
      case "event1":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame1>
            <Frame2 className="left">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame2>
            <Frame3 className="right" />
          </React.Fragment>
        );
      // EE
      case "event2":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame1>
            <Frame2 className="left">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
                style={{ display: "none" }}
              />
            </Frame2>
            <Frame3 className="right" />
          </React.Fragment>
        );
      // ER
      case "event3":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame1>
            <Frame2 className="left">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="local-media"
                style={{ display: "none" }}
              />
            </Frame2>
            <Frame3 className="right" />
          </React.Fragment>
        );
      case "event4":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen">
              <video autoPlay id="screenshare" style={{ display: "none" }} />
            </Frame1>
            <Frame2 className="left">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame2>
            <Frame3 className="right">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame3>
          </React.Fragment>
        );
      // ER and SR
      case "event5":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen" />
            <Frame2>
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame2>
            <Frame3>
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
                style={{ display: "none" }}
              />
            </Frame3>
          </React.Fragment>
        );
      // EE and SR
      case "event6":
        return (
          <React.Fragment>
            <Frame1 className="fullscreen" />
            <Frame2>
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
                style={{ display: "none" }}
              />
            </Frame2>
            <Frame3>
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame3>
          </React.Fragment>
        );
      default:
        return (
          <React.Fragment>
            <Frame1 className="fullscreen" />
            <Frame2 className="left">
              <video
                ref={localRef}
                autoPlay
                muted="muted"
                id="local-media"
              />
            </Frame2>
            <Frame3 className="right">
              <video
                ref={remoteRef}
                autoPlay
                muted="muted"
                id="remote-media"
              />
            </Frame3>
          </React.Fragment>
        );
    }
  };
  return (
    <React.Fragment>
      <Column>
        <ContentWrapper>
          {renderVideo(props)}
        </ContentWrapper>
      </Column>
    </React.Fragment>
  );
};

export default Studio;

const Frame1=styled.div`
背景#6f729b；
文本对齐：居中；
>录像带{
宽度：100%；
对象匹配：覆盖；
}
`;
const Frame2=styled.div`
>录像带{
宽度：400px；
高度：自动；
}
`;
const Frame3=styled.div`
>录像带{
宽度：400px；
高度：自动；
}
`;
const user=JSON.parse（localStorage.getItem（“用户”）；
constudio=（{localRef，remoteRef，…props}）=>{
const[hotkeys，setHotkeys]=React.useState（“event1”）；
React.useffect（（）=>{
return（）=>{
window.ipcdrenderer.removeAllListeners（“eventListened”）；
};
}, []);
反作用(
() => {
如果(
等电子&&
道具客户端连接&&
（user！==null&&user.data.isInteviewer）
) {
window.ipcRenderer.on（“eventListened”，（事件，热键）=>{
设置热键（热键）；
});
}
},
[props.clientJoined]
);
log（“remoteRef”，props.clientJoined）；
常量renderVideo=（）=>{
//const{hotkeys，localRef，remoteRef}=props；
日志（“热键”，热键）；
开关（热键）{
//ER和EE
案例“事件1”：
返回(
);
//EE
案例“事件2”：
返回(
);
//呃
案例“事件3”：
返回(
);
案例“事件4”：
返回(
);
//ER和SR
案例“事件5”：
返回(
);
//EE和SR
案例“事件6”：
返回(
);
违约：
返回(
);
}
};
返回(
{renderVideo（道具）}
);
};
导出默认工作室；

---

因此，我的问题是如何删除此代码重复？

是否可以将

事件作为参数添加到每个帧中，以确定组件将显示哪些事件？Like而不是
const Frame1=
你可以用

    const Frame = styled.div`
    > video {
    width: 400px;
    height: auto;
    frameId: "1"
    events: ["event-1", "event-2"]
  }
`;

在render函数中，可以使用

    return(
        frames.filter(frame => frame.events.includes(hotkeys).map(frame => { 
            return(
                <GenericFrame
                     frameId={frame.id}
                     .....

返回(
frames.filter（frame=>frame.events.includes（热键）.map（frame=>{
返回(
您的问题是什么？如何删除一些代码重复？您可以自由地使用
&&
，仅在需要更改的情况下呈现不同情况下所需的内容。我的问题是如何删除此代码重复。请给我一个示例好吗？我使用的const Frame1是Stylei的样式化组件我不明白你的密码。你能详细解释一下吗？