Reactjs 沒有按預期呈現條件輸出

Question

我已經發布了一個關於我的問題的問題，但這仍然沒有解決：

Reactjs 襪子不會將向下模式應用於渲染輸出

我有以下代碼（請向下滾動到同一底部）：

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 的桌面尺寸，我收到預期輸出：

  我會在手機上渲染

• 對於尺寸大於 900px 的桌面，我不幸收到意外輸出：

  我會在手機上渲染

  我會在桌面上渲染

這不是我所期望的。

也許我有問題，因為 React Socks 與 React Router 不兼容。 這是我將它放在 App.js React 根文件中的方式：

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

我不想接收我希望屏幕尺寸大於 900px 的輸出以及當當前屏幕尺寸小於 900px 時我想要接收的輸出。

我錯過了什么？

Answer 1

所以 react-socks 定義了你可以使用的修飾符如下

你有三個修飾符

• only - 將僅在指定的斷點處呈現組件。

• up - 將在指定斷點及其上方的所有斷點（大於寬度）中渲染組件。

• down - 將在指定的斷點及其下方的所有斷點（小於寬度）渲染組件。

請注意， up在斷點及其上方呈現組件。

如果我們查看您的默認斷點，您只有“移動：900”，這意味着向下修飾符將采用該斷點（900-無窮大）及其下方的斷點（0-900）。

為了做你想做的事，你應該使用多個斷點，我認為 react-socks 有點期望 tbh.

所以如果你有像 mobile:600,desktop: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必須是從為該斷點指定的寬度到下一個斷點的范圍。 在您的情況下，您只有一個斷點，因此無法很好地定義行為。 嘗試使用 2 個斷點{mobile: 0, desktop: 900}並使用mobile only and desktop up or desktop only 。