как условно отобразить стилизованный компонент в React? - PullRequest
Новая
       24

как условно отобразить стилизованный компонент в React?

0 голосов
/ 07 мая 2020

У меня есть 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;
  `;

Ответы [ 3 ]

0 голосов
/ 07 мая 2020

Вы можете удалить этот блок «если» вверху. Вы можете условно включить круг / кнопку в то, что вы возвращаете, например: 

  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>
    </>
  );
0 голосов
/ 07 мая 2020

Вы можете просто условно отобразить StyledComponent в реакции, как показано ниже. Но для ссылки на элемент вы можете использовать response 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;
  `;
0 голосов
/ 07 мая 2020

Удалить оператор 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;
  }
  `,

Он по-прежнему активен, потому что вы установили обработчик OnClick для своего компонента Curcle, а не для img

...