Reactjs 没有按预期呈现条件输出

Question

I have already published a question regarding my problem but this is still not solved:

Reactjs socks does not apply down mode to rendered output

I have following code (please scroll down to the same bottom):

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

class BreakpointComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    setDefaultBreakpoints([{ mobile: 900 }]);
  }

  render() {
    return (
      <BreakpointProvider>
        <Breakpoint mobile down>
          <MobileComponent />
        </Breakpoint>

        <Breakpoint mobile up>
          <DesktopComponent />
        </Breakpoint>
      </BreakpointProvider>
    );
  }
}

class DesktopComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>I WILL RENDER ON DESKTOP</h1>
      </div>
    );
  }
}

class MobileComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>I WILL RENDER ON MOBILE</h1>
      </div>
    );
  }
}

export default BreakpointComponent;

I obtain following output:

• for desktop sizes narrower than 900px I receive expected output:

  I WILL RENDER ON MOBILE

• for desktop sized wider than 900px I unfortunately receive unexpected output:

  I WILL RENDER ON MOBILE

  I WILL RENDER ON DESKTOP

This is not what I expect.

Maybe I have problems because React Socks is not compatible with React Router. This is how I place it in App.js React root file:

// ...
return (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/breakpoint" render={props => <BreakpointComponent {...props} />} exact />
      </Switch>
    </div>
  </BrowserRouter>
);
// ...

I do not want to receive output I desire for screen sizes wider than 900px together with this I want to receive when the current screen size is narrower than 900px.

What am I missing?

Answer 1

So react-socks define the modifiers you can use as follows

You have three modifiers

• only - will render the component only in the specified breakpoint.

• up - will render the component in the specified breakpoint and all the breakpoints above it (greater than the width).

• down - will render the component in the specified breakpoint and all the breakpoints below it (less than the width).

Notice that up renders the component in the breakpoint and above it.

If we look at your default breakpoints you only have 'mobile: 900', this means the down modifier will take that breakpoint (900-infinity) and the one below it (0-900).

To do what you want you should use more than one breakpoint, I think react-socks kinda expects that tbh.

So if you have breakpoints like mobile: 600, desktop:900. The mobile component could take the mobile breakpoint (600-900) down to 0. And the desktop component could take the desktop breakpoint up (900-infinity)

Answer 2

I'm not quite sure which react-socks version that you are using. But according to the latest documentation, you have to use it as follows.

return (
<div>
  <Breakpoint small down>
    <div>I will render only in mobile devices</div>
  </Breakpoint>

  <Breakpoint medium only>
    <div>I will render only in tablets (iPad, etc...)</div>
  </Breakpoint>

  <Breakpoint medium down>
    <div>I will render in tablets (iPad, etc...) and everything below (mobile devices)</div>
  </Breakpoint>

  <Breakpoint medium up>
    <div>I will render in tablets (iPad, etc...) and everything above (laptops, desktops)</div>
  </Breakpoint>

  <Breakpoint large up>
    <div>I will render in laptops, desktops and everything above</div>
  </Breakpoint>
</div>);

You are using the word 'mobile' instead of keywords small,medium,large ;

Answer 3

The convention followed by react-socks is kinda weird. I couldn't get clear idea from their documentation. If you observe keenly they have a 0 breakpoint in all their examples. That should give you some idea. If you say mobile that has to be a range from the width specified for that breakpoint to the next breakpoint. In your case you have only one break point so the behaviour can not be defined well. Try with 2 breakpoints {mobile: 0, desktop: 900} and use mobile only and desktop up or desktop only .