如何在反应中有条件地渲染样式化的组件？答案

【问题标题】：how to conditional render a styled component in react?如何在反应中有条件地渲染样式化的组件？
【发布时间】：2020-08-23 02:11:21
【问题描述】：

我有一个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;
  `;

【问题讨论】：

标签： javascript html css reactjs styled-components

【解决方案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 处理程序

【讨论】：

我已经试过了。但随后按钮保持在其位置并且可点击。它只是不可见。

【解决方案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>
    </>
  );

【讨论】：

【解决方案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;
  `;

【讨论】：