Reactjs 在物料界面和x27之间切换的最佳方式；s手风琴和标签是一种反应迅速的策略？

我想使用MaterialUI react实现（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>

{data.listAccordions.data.length>0
？data.listAccordions.data
.排序（（a，b）=>
parseInt（a.priority）{
返回(
);
})
：null}

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

const isLargeScreen = useMedia('(min-width: 768px)');

return isLargeScreen ? <Tabs items={myItems} /> : <Accordion items={myItems} />;

---

啊。当然我想得太多了。谢谢：）哦，有一件事。这将是服务器端渲染-我认为useState会因为缺少窗口而停止？好吧，你不能有条件地调用hook，你会怎么处理？我可以将状态变量设置为null吗？SSR渲染器会忽略useEffect，所以窗口的魔法应该可以，我想。我没有SSR的经验。您是完全SSR还是混合（React服务器组件）？如果您是完整的SSR：您可以将这两个组件呈现到DOM中，并通过CSS媒体查询切换它们的根节点可见性，但我真的不知道SSR的最佳响应实践是什么。好的，非常感谢您的帮助。我现在已经放弃了SSR要求：）

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