时间戳

首页 > 解决方案 > 声明全局变量时出现意外令牌错误？

javascript - 声明全局变量时出现意外令牌错误？

问题描述

我 **Unexpected token '&'**在声明 globle 变量时遇到错误。我也尝试过严格地定义它的值，但仍然得到相同的错误，为什么？

我正在这样做。

<Head>
 

   {
      <script type="text/javascript">
        var s_pageName2=JSON.stringify('abc:en-us:/lo-form')
      </script>
    }
  </Head>

这是我的整个代码 https://codesandbox.io/s/long-bird-tgwcv?file=/pages/index.js

我正在使用 nextjs 框架。我想创建具有此值的全局变量abc:en-us:/lo-form

这不是代码和框错误。我在本地机器上面临同样的问题

在此处输入图像描述

标签： javascriptreactjsnext.js

解决方案

在 jsx 中你不能这样做，你可以使用 dangerouslySetInnerHTML，但我强烈反对使用它。

<script
  dangerouslySetInnerHTML={{
    __html: ` var s_pageName2='abc:en-us:/lo-form'`
  }}
/>

如果您想存储一个全局变量以在您的任何组件中重用，有不同的方法可以实现这一目标，例如使用 react Context 并公开一个自定义挂钩以在您需要的任何地方使用。

例子 ：

_app.js

    import { MyProvider} from '../components/MyProvider'
    
    
    function MyApp({ Component, pageProps }) {
        return (
                <MyProvider>
                    <Component {...pageProps} />
                </MyProvider>
        )
    }

export default MyApp

/components/MyProvider ：

import React, { useState, useEffect,useContext } from 'react'
export const MyContext= React.createContext(null)

export function MyProvider ({ children }) { 
    const [myVar, setMyVar] = useState('abc:en-us:/lo-form')
    return (
        <MyContext.Provider value={{myVar}}>
            {children}
        </MyContext.Provider>
        
        )
 }

export function useApp() {
    const value = useContext(MyContext)
    return value
}

然后在任何其他组件/页面中，您可以以这种方式使用您的钩子：

import { useApp } from './components/MyProvider'
const MyPage= () => {
  const {myVar} = useApp()
   ... rest of code

}

这只是一个示例，您可以通过多种方式实现，这取决于您的应用程序业务逻辑。

推荐阅读