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

Question

我正在将一个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]有角度柔性布局https://github.com/angular/flex-layout/wiki/ngClass-API

在上面的代码中，如果屏幕是小的或中等的，那么默认情况下会添加以下类is-card-loaded loaded is-card-open is-card-opened，但我在reactjs中找不到相关的代码。我的问题是，当屏幕是小屏幕还是中等屏幕时，有什么方法可以默认添加这些类吗？

Answer 1

TL；DR无

Angular作为一个框架有很多内置的东西，React只是一个允许你处理用户界面的库，但它不在乎你用什么来构建它，好的是你可以插入另一个库，让它根据你的需求工作。

谈到根据屏幕大小添加类，您可以使用一些库，如bootstrap或material ui，也可以使用钩子将事件侦听器连接到窗口以检测屏幕大小，并使用类名等方法应用类。

也许这能帮到你https://www.npmjs.com/package/@反作用挂钩/窗口大小https://www.npmjs.com/package/classnames

Answer 2

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

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

第二种解决方案可能会有点痛苦，这取决于你是否使用React Hooks。Hook似乎有更好的选择来简单地访问当前设备(sm、md、lg(，但话说回来，你可能可以在不到50行的时间内编写自己的解决方案。这里有几个流行的选项，你可以浏览，它们是React特定的，但你也可以开始寻找Vanilla JS媒体查询解决方案。

• 反应灵敏
• 反作用短袜
• 反应介质

React版本(使用React袜子挂钩(：

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

React版本(使用React响应挂钩(

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

React示例(使用Render Children(

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

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