Question

我开始使用React Socks库使响应式设计更易于管理。问题是，尽管在狭窄的浏览器窗口中关闭了桌面版本，但无论屏幕大小如何，都可以看到移动版本[由移动版本1文字指示]。我使用了Google Chrome浏览器以及Microsoft Edge的开发工具来检查像素像素是否正确，但是没有。尽管屏幕宽度有所变化，但只有台式机版本才能正常工作，并且可以看到移动版本。我将其扩大到最大，并且移动版本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"。

Reactjs袜子不会将向下模式应用于渲染的输出

2 个答案: