在材料 ui 的手风琴和选项卡之间切换作为响应策略的最佳方法？

Question

我想在手风琴和选项卡之间切换，根据屏幕宽度使用材料UI反应实现(MUI)。这可能吗?文档似乎没有涵盖这个用例，但我本以为它会很常见。

我目前正在这样做，它呈现了一个编辑器js内容块从我的CMS非常好地在手风琴，但不知道如何得到这个去标签布局时，说，屏幕宽度为>768 .

感谢您的帮助。

<Accordion>
{data.listAccordions.data.length > 0
? data.listAccordions.data
.sort((a, b) =>
parseInt(a.priority) < parseInt(b.priority) ? 1 : -1
)
.map((accordionItem, index) => {
return (
<AccordionItem
title={accordionItem.heading}
icon={<EmptyIcon />}
key={index}
>
<div>
<EditorRendererProvider
data={{ blocks: accordionItem.content }}
/>
</div>
</AccordionItem>
);
})
: null}
</Accordion>

Answer 1

你基本上使用两个独立的组件;一个用于断点以下，一个用于断点以上。和一个媒体查询挂钩;网上有很多。

const isLargeScreen = useMedia('(min-width: 768px)');
return isLargeScreen ? <Tabs items={myItems} /> : <Accordion items={myItems} />;

这里有一个你可以使用的钩子实现:

import { useState, useEffect } from 'react';
export const useMedia = (query: any) => {
const [matches, setMatches] = useState(window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) setMatches(media.matches);
const listener = () => setMatches(media.matches);
media.addListener(listener);
return () => media.removeListener(listener);
}, [matches, query]);
return matches;
};