React：在模态框内模拟手机屏幕宽度

Posted 2023-03-06

【中文标题】React：在模态框内模拟手机屏幕宽度

【英文标题】：React: Simulate mobile screen width inside of a modal

【发布时间】：2021-04-30 18:43:58

【问题描述】：

我有一个带有桌面样式的组件

和移动样式，当浏览器宽度小于 750 像素时发生

我想在一个 600px 的模态框内展示这个组件，但让组件表现得好像浏览器宽度是 600px。当组件未在模态中呈现时，它应该表现正常，样式会根据浏览器的宽度进行调整，但是当组件呈现在模态中时，我希望它表现得好像屏幕宽度就是宽度模态的。

现在，该组件在 600 像素宽的模态框内采用桌面样式，如下所示，但我希望该组件采用上面的样式，这些圆圈堆叠在一列中。

---

Here is a repository of the code I have for this problem。 我想要做的唯一区别是当圆圈出现在模态框内时应该堆叠它们，但它们应该在“/其他”页面上以相同的方式设置样式。

【参考方案1】：

您可以在 Content 组件中包含一个属性以相应地更改您的样式：

export default ( insideModal ) => (
  <div className="d-flex flex-md-row flex-column"
   style= flexDirection: `$insideModal ? "column" : "row" ` 
  >
    <Image />
    <Image />
    <Image />
  </div>
);

然后包含在你的 Modal 组件中：

const Modal = () => (
  <div
    style= width: 500, backgroundColor: "rgba(0,0,0,0.4)", top: "50%" 
    className="position-fixed m-auto"
  >
    <Content insideModal />
  </div>
);

【讨论】：

我的问题是我已经有几个页面为桌面和移动设置了样式，我想只采用移动样式并将其放置在模态中，而不需要更改任何内容