Next js ile proje geliştiriyorum。 burada eğer mobile CIhaz ise bir 组件渲染 etmek istiyorum。 ama bu isMobileDevice değerini jsx içerisinde kullanırsam aşadıdaki hataları alıyorum.
import useTranslation from "next-translate/useTranslation";
import isMobile from "ismobilejs";
import DefaultLayout from "../../components/core/Layouts/Default";
import { MouseIcon, ScrollDownWrapper, ScrollText, SearchBoxWrapper, SliderWrapper, Wrapper } from "./style";
import MainSlider from "../../components/common/MainSlider";
import SearchBox from "../../components/common/SearchBox";
const HomeScreen = () => {
const { t } = useTranslation("home");
const isMobileDevice = isMobile()?.any;
return (
<DefaultLayout>
<Wrapper>
<SearchBoxWrapper>
<SearchBox />
{isMobileDevice && (
<ScrollDownWrapper>
<MouseIcon />
<ScrollText>{t("scrollDown")}</ScrollText>
</ScrollDownWrapper>
)}
</SearchBoxWrapper>
<SliderWrapper>
<MainSlider />
</SliderWrapper>
</Wrapper>
</DefaultLayout>
);
};
export default HomeScreen;
我想使用“使用客户端”在客户端渲染项目,因为 isMobijeJs 需要窗口对象,但它不起作用。
你能帮我吗?
您可以使用 react-device-detect 包。它也相当易于使用,并且有很好的选项,例如可以解决您的问题的特定视图元素。我已经在 Next 13.2 上对此进行了测试,并且可以确认它有效。