reactjs中ngClass.xs或md的相关代码

我正在将angular应用程序移植到reactjs。几乎完成了工作，但仍停留在某一点上

这是我的密码：

<div class="no-js one-page-layout sound-effects"
     [ngClass]="{'is-card-loaded loaded is-card-open is-card-opened':isCardOpen,
     'is-ajax-page-active is-ajax-page-loaded': isSectionOpen}"
     [ngClass.xs]="{'is-card-loaded loaded is-card-open is-card-opened':true,
     'is-ajax-page-active is-ajax-page-loaded': isSectionOpen}"
     [ngClass.md]="{'is-card-loaded loaded is-card-open is-card-opened':true,
     'is-ajax-page-active is-ajax-page-loaded': isSectionOpen}">
  <router-outlet></router-outlet>
</div>

[ngClass.xs]提供角度flexlayout

在上面的代码中，如果屏幕是小型或中型，那么默认情况下会添加以下类

is card loaded is card open is card opened

，但我在reactjs中找不到相关代码。我的问题是，当屏幕是小型或中型时，有没有办法在默认情况下添加这些类；No.博士

作为一个框架，内部构建了很多东西，React只是一个库，允许您处理用户界面，但它不关心您使用什么来构建它，好的是您可以插入其他库，使其根据您的需要工作

关于根据屏幕大小添加类，有一些库可以使用，比如引导或材质ui，或者您可以自己构建它，使用钩子将事件侦听器连接到窗口以检测屏幕大小，并使用类名之类的内容应用类

也许这能帮你

---

不幸的是，本机不支持它。您正在寻找两种解决方案。第一种是有条件地设置类。第二个是，访问要在所述条件类中使用的媒体查询信息

第一个解决方案很简单。有一个很棒的库，名为，它处理有条件设置的样式类

第二种解决方案可能会有点痛苦，这取决于您是否正在使用React挂钩。钩子似乎有更好的选择，可以简单地访问当前设备（sm、md、lg），但你也可以用不到50行代码编写自己的解决方案。这里有几个流行的选项，您可以查看这些选项，这些选项是特定于React的，但是您也可以开始寻找一个普通的JS媒体查询解决方案

React版本（使用React socks挂钩）：

//为了简洁起见，我想将其作为cx导入
const cx=require（'classnames'）；
//内部渲染函数
常量断点=useCurrentBreakpointName（）；
常量断点类={
md:“md类”，
sm:“sm课程”
};
常量类=cx(
“无js单页布局音效”，
断点类[断点]，//忽略未定义
{
“是否已加载卡是否已打开卡是否已打开”：isCardOpen
“ajax页面是否处于活动状态以及ajax页面是否已加载”：isSectionOpen，
}
);
返回(
);

React版本（使用React响应挂钩）

//为了简洁起见，我想将其作为cx导入
const cx=require（'classnames'）；
//我会将这些隐藏在实用程序函数后面，以免重复查询
//在每个组件中。
const isMD=useMediaQuery（{query:'（最小设备宽度：1200px）}）；
const isSM=useMediaQuery（{query:'（最小设备宽度：800px）}）；
常量类=cx(
“无js单页布局音效”，
{
“是否已加载卡是否已打开卡是否已打开”：isCardOpen
“ajax页面是否处于活动状态以及ajax页面是否已加载”：isSectionOpen，
“md类”：isMD，
“sm类”：isSM
}
);
返回(
);

反应示例（使用渲染子对象）

//为了简洁起见，我想将其作为cx导入
const cx=require（'classnames'）；
返回(
{匹配=>(
{matches.small&&我很小！
}
{matches.medium&&我是medium！
}
{matches.large&&我很大！
}
)}
);

如您所见，许多解决方案取决于您希望如何编写React组件。两者都不受本机支持。React是非常简单的，有点像BackboneJS或EmberJS。它保持了它的精简和强大，但你最终也依赖于几十个库，这样你就不会重新创建轮子了。希望你能在我链接的库中找到你需要的东西

// I like to import it as cx for brevity
const cx = require('classnames');

// Inside render function
const breakpoint = useCurrentBreakpointName();
const breakpointClasses = {
  md: 'classes-for-md',
  sm: 'classes-for-sm'
};

const classes = cx(
  'no-js one-page-layout sound-effects',
  breakpointClasses[breakpoint], // undefined is ignored
  {
    'is-card-loaded loaded is-card-open is-card-opened': isCardOpen
    'is-ajax-page-active is-ajax-page-loaded': isSectionOpen,
  }
);

return (
  <div className={classes} />
);

// I like to import it as cx for brevity
const cx = require('classnames');

// I'd hide these behind utility functions so as not to duplicate the query
// in every component.
const isMD = useMediaQuery({ query: '(min-device-width: 1200px)' });
const isSM = useMediaQuery({ query: '(min-device-width: 800px)' });

const classes = cx(
  'no-js one-page-layout sound-effects',
  {
    'is-card-loaded loaded is-card-open is-card-opened': isCardOpen
    'is-ajax-page-active is-ajax-page-loaded': isSectionOpen,
    'classes-for-md': isMD,
    'classes-for-sm': isSM
  }
);

return (
  <div className={classes} />
);

// I like to import it as cx for brevity
const cx = require('classnames');

return (
  <Media queries={{
    small: "(max-width: 599px)",
    medium: "(min-width: 600px) and (max-width: 1199px)",
    large: "(min-width: 1200px)"
  }}>
    {matches => (
      <div className={cx(
        'no-js one-page-layout sound-effects',
        {
          'is-card-loaded loaded is-card-open is-card-opened': isCardOpen
          'is-ajax-page-active is-ajax-page-loaded': isSectionOpen,
          'classes-for-md': matches.medium,
          'classes-for-sm': matches.small
        }
      )}>
        <Fragment>
          {matches.small && <p>I am small!</p>}
          {matches.medium && <p>I am medium!</p>}
          {matches.large && <p>I am large!</p>}
        </Fragment>
      </div>
    )}
  </Media>
);