gpt4 book ai didi

reactjs - 为 NextJs 中的任何组件获取响应式 Prop

转载 作者:行者123 更新时间:2023-12-04 10:08:51 25 4
gpt4 key购买 nike

我的 NextJs 应用程序中有一个代码来检测 用户代理 .这对于 NextJs 页面来说完全没问题。但是,当我需要调用此响应时 isMobile prop 到组件(例如:页脚、页眉、导航)然后我该怎么办?

// index.js

IndexPage.getInitialProps = ({ req }) => {
let userAgent;
if (req) { // if you are on the server and you get a 'req' property from your context
userAgent = req.headers['user-agent'] // get the user-agent from the headers
} else {
userAgent = navigator.userAgent // if you are on the client you can access the navigator from the window object
}

let isMobile = Boolean(userAgent.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
))

return { isMobile }
}

Now I can access the isMobile prop that will return either true or false


const IndexPage = ({ isMobile }) => {
return (
<div>
{isMobile ? (<h1>I am on mobile!</h1>) : (<h1>I am on desktop! </h1>)}
</div>
)
}

最佳答案

它不会发生在您的 中组件 因为它们将在客户端呈现,但是每当您点击页面 (SSR) 时,请求 header 都将使用当前代理进行更新。

因此,如果您要使用 isMobile响应式设计的 Prop 实际上没有帮助,因为在浏览器上媒体查询是可以理解的,否则您可以在每次页面点击时检测您的代理(SSR)并将其存储在像 redux store 这样的地方,然后在您的子组件中使用。

但是,例如,如果您单击页脚中的链接并呈现另一个组件,则代理将不会更新。

关于reactjs - 为 NextJs 中的任何组件获取响应式 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61436766/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com