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

问题描述

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

我目前正在这样做，它在手风琴中非常好地呈现来自我的 CMS 的 editorJs 内容块，但不确定如何在屏幕宽度 > 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>

解决方法

您基本上使用两个独立的组件；一个用于断点下方，一个用于断点上方。和一个媒体查询钩子；网上有很多。

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