Reactjs socks does not apply down mode to rendered output

问题

I started to use React Socks library to make my responsive design easier to manage. Problem is that althought desktop version is being switched off when i narrow browsers window the mobile version [ indicated by Mobile version#1 text ] is visible despite the screen size. I used Google Chrome's as well as Microsoft Edge's dev tools to check if i am wrong about pixels but no. Only desktop version works properly and mobile version is visible despite screen width changes. I widen it to maximum and the Mobile version#1 component is all the time visible. Can you help me and point out what am I missing?

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:

It's working for me.

You have not closed </BreakpointProvider> in your code.

Try below code.

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"));

Happy coding!!!

来源：https://stackoverflow.com/questions/56966229/reactjs-socks-does-not-apply-down-mode-to-rendered-output

标签

reactjs

responsive-design