Reactjs 袜子不会将向下模式应用于渲染输出 [英] Reactjs socks does not apply down mode to rendered output

问题描述

我开始使用 React Socks 库来使我的响应式设计更易于管理.问题是，虽然当我缩小浏览器窗口时桌面版本被关闭，但移动版本[由移动版本#1 文本指示] 是可见的，尽管屏幕大小.我使用 Google Chrome 和 Microsoft Edge 的开发工具来检查我是否对像素有误，但没有.尽管屏幕宽度发生变化，但只有桌面版才能正常工作，而移动版仍可见.我将其扩大到最大，并且 Mobile version#1 组件始终可见.你能帮我指出我遗漏了什么吗?

从react"导入React；从'react-socks'导入{setDefaultBreakpoints}；import Breakpoint, { BreakpointProvider } from 'react-socks';class MyComponent 扩展了 React.Component {构造函数(道具){超级(道具)；}componentWillMount(){setDefaultBreakpoints([{ 桌面:1025 }]);}使成为(){返回(<BreakpointProvider><断点桌面向下><div style={{padding: "10px", border:"1px solid red"}}>移动版#1

</断点><br/><br/><断点桌面启动><div style={{padding: "10px", border:"1px solid red"}}>桌面版#1

</断点></BreakpointProvider>);}}

解决方案

它对我有用.

您尚未在代码中关闭 </BreakpointProvider>.

试试下面的代码.

import React, { Component } from "react";从react-dom"导入 ReactDOM；从'react-socks'导入{setDefaultBreakpoints}；import Breakpoint, { BreakpointProvider } from 'react-socks';类 App 扩展组件 {componentWillMount(){setDefaultBreakpoints([{ 桌面:1025 }]);}使成为() {返回(<BreakpointProvider><断点桌面向下><div style={{padding: "10px", border:"1px solid red"}}>移动版#1

</断点><br/><br/><断点桌面启动><div style={{padding: "10px", border:"1px solid red"}}>桌面版#1

</断点></BreakpointProvider>);}}ReactDOM.render(, document.getElementById("root"));

快乐编码！！！

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

解决方案

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!!!

这篇关于Reactjs 袜子不会将向下模式应用于渲染输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！