在 material ui 的手风琴和标签之间切换作为响应策略的最佳方式？

Question

我想根据屏幕宽度在手风琴和标签之间切换，使用 material 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>

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

在 material ui 的手风琴和标签之间切换作为响应策略的最佳方式？

Best way to switch between material ui's accordion and tabs as a responsive tactic?

tabs

accordion

reactjs

material-ui