Question

我已经发布了一个关于我的问题的问题，但是仍然无法解决：

Reactjs socks does not apply down mode to rendered output

我有以下代码（请向下滚动到同一底部）：

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;

我获得以下输出：

对于小于900px的桌面尺寸，我收到预期的输出：

我会提供移动电话
对于大于900像素的桌面，我不幸收到了意外的输出：

我会提供移动电话

我会在桌面上渲染

这不是我期望的。

也许我有问题，因为React Socks与React Router不兼容。这是我将其放置在App.js React根文件中的方式：

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

我不想接收我想要的屏幕尺寸大于900px的输出，以及当当前屏幕尺寸小于900px时想要接收的输出。

我想念什么？

Answer 1

因此react-socks定义了可以按如下方式使用的修饰符

您有三个修饰符

•仅-仅在指定的断点处呈现组件。

•up-将在指定的断点及其上方的所有断点（大于宽度）处渲染组件。

•下-将在指定的断点及其下方的所有断点（小于宽度）处渲染组件。

请注意，向上在断点及其上方渲染组件。

如果我们查看您的默认断点，则您只有“ mobile：900”，这意味着down修饰符将采用该断点（900-无穷大）和其下一个断点（0-900）。

要做你想做的事，你应该使用多个断点，我认为react-socks有点希望tbh。

因此，如果您有断点，例如手机：600，台式机：900。移动组件可以将移动断点（600-900）降低到0。桌面组件可以将桌面断点提高（900-无穷大）

Answer 2

我不确定您使用的是哪个react-socks版本。但是根据最新文档，您必须按以下方式使用它。

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

您使用的是“移动”一词，而不是关键字small,medium,large;

Answer 3

遵循react-socks的约定有点奇怪。我从他们的文档中找不到清晰的主意。如果您敏锐地观察到它们在所有示例中都有一个0断点。那应该给你一些想法。如果您说mobile，则必须是从该断点指定的宽度到下一个断点的范围。在您的情况下，您只有一个断点，因此无法很好地定义行为。尝试使用两个断点{mobile: 0, desktop: 900}，并使用mobile only和desktop up或desktop only。

React.js未按预期呈现条件输出

3 个答案: