Reactjs socks не применяет режим down к отображаемому выводу - PullRequest
Новая
       13

Reactjs socks не применяет режим down к отображаемому выводу

0 голосов
/ 10 июля 2019

Я начал использовать библиотеку React Socks, чтобы упростить управление моим адаптивным дизайном.Проблема заключается в том, что хотя версия для настольного компьютера отключена, когда в узком окне браузера отображается мобильная версия [указана в тексте № 1 для мобильной версии], несмотря на размер экрана.Я использовал Google Chrome, а также инструменты разработчика Microsoft Edge, чтобы проверить, не ошибаюсь ли я с пикселями, но нет.Только настольная версия работает правильно, а мобильная версия видна, несмотря на изменения ширины экрана.Я расширил его до максимума, и компонент Mobile версии # 1 все время виден.Можете ли вы помочь мне и указать, что мне не хватает? 

import React from "react";   
import { setDefaultBreakpoints } from 'react-socks';
import Breakpoint, { BreakpointProvider } from 'react-socks';   

class MyComponent extends React.Component {

  constructor(props){
    super(props);
  }

  componentWillMount(){
    setDefaultBreakpoints([
      { desktop: 1025 }
    ]);
  }

  render(){
    return(
      <BreakpointProvider>
        <Breakpoint desktop down>
          <div style={{padding: "10px", border:"1px solid red"}}>
            Mobile version#1
          </div>
        </Breakpoint>

        <br/>
        <br/>

        <Breakpoint desktop up>
          <div style={{padding: "10px", border:"1px solid red"}}>
            Desktop version#1
          </div>
        </Breakpoint>
      </BreakpointProvider>
    );
  }
}

1 Ответ

1 голос
/ 10 июля 2019

Это работает для меня.

Вы не закрыли </BreakpointProvider> в своем коде.

Попробуйте код ниже. 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { setDefaultBreakpoints } from 'react-socks';
import Breakpoint, { BreakpointProvider } from 'react-socks';   

class App extends Component {

  componentWillMount(){
    setDefaultBreakpoints([
      { desktop: 1025 }
    ]);
  }

  render() {
    return(
      <BreakpointProvider>
        <Breakpoint desktop down>
          <div style={{padding: "10px", border:"1px solid red"}}>
            Mobile version#1
          </div>
        </Breakpoint>

        <br/>
        <br/>

        <Breakpoint desktop up>
          <div style={{padding: "10px", border:"1px solid red"}}>
            Desktop version#1
          </div>
        </Breakpoint>
      </BreakpointProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Удачного кодирования !!!

...