如何在反應中有條件地渲染樣式化的組件？

Question

我有一個styled-component ，我只想在屏幕尺寸大於 480 時才渲染它。我嘗試通過獲取對元素的引用並禁用它來做到這一點。 但這沒有用。 我將display屬性設置為none ，但按鈕仍然存在，它是可點擊的。

這是我的代碼

 console.log(window.screen.width);
  if(window.screen.width <= 480) {
    var a = document.getElementsByClassName("Button1")
    ...
    ...
    ...
    ...
  }

  return (
    <>
      <div className="control">
        <Circle onClick={handleVideoToggle}>
          <img src={video ? Video : VideoOff} />
          </Circle>
        <Circle onClick={handleAudioToggle}>
          <img src={audio ? Mic : MicOff} />
        </Circle>
        <Circle onClick={handleScreenToggle}>
          <img className = "Button1" src={screen ? Screen : ScreenOff} />
        </Circle>
        <Circle onClick={handleCallDisconnect}>
          <img src={End} />
        </Circle>
      </div>
    </>
  );
};

export default Controls;

const 
  Circle = styled.div`
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    cursor: pointer;
    :not(:first-child) {
      margin-left: 20px;
    }
  `,
  Image = styled.img`
    max-width: 100%;
    width: 45px;
    margin: 0 auto;
  `;

Answer 1

刪除 if 語句並使其與 css 媒體查詢一起使用：

const Circle = styled.div`
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  cursor: pointer;
  @media only screen and (max-width: 480px){
    display: none;
  }
  :not(:first-child) {
    margin-left: 20px;
  }
  `,

它仍然是可點擊的，因為您為 Curcle 組件而不是 img 設置了 OnClick 處理程序

Answer 2

您可以刪除頂部的“if”塊。 您可以有條件地在返回的內容中包含 Circle/Button，如下所示：

  const isSmall = window.screen.width <= 480;
  return (
    <>
      <div className="control">
        <Circle onClick={handleVideoToggle}>
          <img src={video ? Video : VideoOff} />
          </Circle>
        <Circle onClick={handleAudioToggle}>
          <img src={audio ? Mic : MicOff} />
        </Circle>
        {!isSmall && (<Circle onClick={handleScreenToggle}>
              <img className = "Button1" src={screen ? Screen : ScreenOff} />
            </Circle>)
        }
        <Circle onClick={handleCallDisconnect}>
          <img src={End} />
        </Circle>
      </div>
    </>
  );

Answer 3

您可以有條件地在 react 中渲染 StyledComponent，如下所示。 但是對於引用一個元素，您可以使用 react ref而不是document.getElementsByClassName("Button1") 。

 console.log(window.screen.width); const isAbove480 = window.screen.width > 480; return ( <> <div className="control"> <Circle onClick={handleVideoToggle}> <img src={video? Video: VideoOff} /> </Circle> <Circle onClick={handleAudioToggle}> <img src={audio? Mic: MicOff} /> </Circle> { isAbove480? (<Circle onClick={handleScreenToggle}> <img className = "Button1" src={screen? Screen: ScreenOff} /> </Circle>): null } <Circle onClick={handleCallDisconnect}> <img src={End} /> </Circle> </div> </> ); }; export default Controls; const Circle = styled.div` width: 45px; height: 45px; border-radius: 50%; display: flex; cursor: pointer; :not(:first-child) { margin-left: 20px; } `, Image = styled.img` max-width: 100%; width: 45px; margin: 0 auto; `;