时间戳

首页 > 解决方案 > 作为响应策略在材料 ui 的手风琴和选项卡之间切换的最佳方式？

reactjs - 作为响应策略在材料 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>

标签： reactjstabsmaterial-uiaccordion

解决方案

您基本上使用两个单独的组件；一个用于低于断点，一个用于高于断点。还有一个媒体查询钩子；网上有很多。

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

推荐阅读