Reactjs socks不会将向下模式应用于渲染输出

Question

我开始使用React Socks库来使我的响应式设计更容易管理。问题是，尽管当我缩小浏览器窗口时，桌面版本会被关闭，但移动version#1文本指示的移动版本是可见的，无论屏幕大小如何。我使用了Google Chrome和Microsoft Edge的开发工具来检查我的像素是否有误，但没有。尽管屏幕宽度发生了变化，但只有桌面版本可以正常工作，而移动版本仍然可见。我将其放大到最大值，移动version#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>
    );
  }
}

Answer 1

这对我很有效。

您尚未在代码中关闭</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"));

编码快乐！

Answer 2

通过查看useCurrentBreakpointName()返回的内容进行调试可能会有所帮助。

我必须将其视为有效宽度的范围，而不是像横线一样，并使用only修饰符。像这样的东西对我来说很有效：

setDefaultBreakpoints([{ mobile: 0 }, { desktop: 1025 }]);

<Breakpoint mobile only>
  Shows up below 1025 and does not show up above.
</Breakpoint>

<Breakpoint desktop only>
  Shows up above 1025 and does not show up below.
</Breakpoint>

这是在使用"react-socks": "^2.1.0"。