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

Question

根据命令，我需要显示视频元素。我的意思是，用例类似于如果 1 则仅采访者 (ER) 视频，如果 2 则仅采访者 (EE) 视频，如果 3 则两个视频，如果 4 则两者都在后台有 powerpoint。要显示视频元素，我需要在 componentDidMount 中使用 ref，其中正在监听套接字以使用 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;

所以我的问题是如何删除这个重复的代码？

Answer 1

是否可以将 events 作为参数添加到每个框架中，以决定组件在哪些事件中可见？就像代替 const Frame1 =你可以使用

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

在渲染函数中，可以使用以下方式调用

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

等等。