Javascript Reactjs未按预期呈现条件输出

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

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

从“React”导入React；
从“react socks”导入{setDefaultBreakpoints}；
从“react socks”导入断点{BreakpointProvider}；
类断点组件扩展了React.Component{
建造师（道具）{
超级（道具）；
}
组件willmount（）{
setDefaultBreakpoints（[{mobile:900}]）；
}
render（）{
返回(
);
}
}
类DesktopComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
我将在桌面上渲染
);
}
}
类MobileComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
我将在手机上渲染
);
}
}
导出默认断点组件；

我获得以下输出：

• 对于小于900px的桌面大小，我收到预期输出：
  我将在手机上渲染

• 对于尺寸大于900px的桌面，我不幸收到意外输出：
  我将在手机上渲染
  我将在桌面上渲染

这不是我所期望的

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

/。。。
返回(
}精确的/>
);
// ...

我不希望收到我希望的大于900px的屏幕尺寸的输出，当当前屏幕尺寸小于900px时，我希望收到这些输出

---

我遗漏了什么？

因此，请定义可以使用的修饰符，如下所示

您有三个修饰符

•仅-仅在指定的断点中渲染组件

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

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

请注意，up在断点及其上方呈现组件

如果我们查看您的默认断点，您只有'mobile:900'，这意味着向下修饰符将获取该断点（900无穷大）和它下面的断点（0-900）

要做你想做的事情，你应该使用不止一个断点，我想react socks有点期待tbh

---

所以，如果你有断点，比如mobile:600，desktop:900。移动组件可以将移动断点（600-900）降至0。桌面组件可能会将桌面断点向上移动（900无穷大）

因此，请定义可以使用的修饰符，如下所示

您有三个修饰符

•仅-仅在指定的断点中渲染组件

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

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

请注意，up在断点及其上方呈现组件

如果我们查看您的默认断点，您只有'mobile:900'，这意味着向下修饰符将获取该断点（900无穷大）和它下面的断点（0-900）

要做你想做的事情，你应该使用不止一个断点，我想react socks有点期待tbh

---

所以，如果你有断点，比如mobile:600，desktop:900。移动组件可以将移动断点（600-900）降至0。桌面组件可能会将桌面断点（900无穷大）

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

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

返回(
我将仅在移动设备中渲染
我将仅在平板电脑（iPad等）中渲染
我将在平板电脑（iPad等）和以下所有设备（移动设备）中进行渲染
我将在平板电脑（iPad等）和上面的所有设备（笔记本电脑、台式机）中进行渲染
我将在笔记本电脑，台式机和上面的一切渲染
);

---

您使用的是“移动”一词，而不是关键字

小型、中型、大型

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

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

返回(
我将仅在移动设备中渲染
我将仅在平板电脑（iPad等）中渲染
我将在平板电脑（iPad等）和以下所有设备（移动设备）中进行渲染
我将在平板电脑（iPad等）和上面的所有设备（笔记本电脑、台式机）中进行渲染
我将在笔记本电脑，台式机和上面的一切渲染
);

---

您使用的是“移动”一词，而不是关键字

小型、中型、大型

接下来是

react socks

的惯例有点奇怪。我无法从他们的文档中得到清晰的想法。如果你仔细观察，他们在所有的例子中都有一个

0

断点。这应该会给你一些想法。如果您说

mobile

，则必须是从为该断点指定的宽度到下一个断点的范围。在您的情况下，您只有一个断点，因此无法很好地定义行为。尝试使用两个断点

{mobile:0，desktop:900}

，然后使用

仅移动

和

桌面启动

或

仅桌面

遵循的惯例有点奇怪。我无法从他们的文档中得到清晰的想法。如果你仔细观察，他们在所有的例子中都有一个

0

断点。这应该会给你一些想法。如果你说

mobile

h