从React组件内的脚本访问变量

Posted 2021-04-07

从React组件内的脚本访问变量

我在Node上进行设备检测，并将此对象发送到index.ejs内的客户端（React）

<script  type="text/javascript">window.deviceType = <%- deviceType %></script>

在React组件内部如果我console.log window.deviceType我看到它运行良好但是如果我尝试使用它它说错误，窗口没有定义。

例如，这是反应组分内部

    return(
      <div>
       <Menu.Item>
         {window.deviceType.isMobile ? (
            <Link to="/">
                <h1>React Boilerplate 23</h1>
            </Link>
         ) : (
                 <div>PROBLEM</div>
          )}
        </Menu.Item>
        <div type="button" onClick={() => console.log(window.deviceType)}>
          XX
        </div>
       </div>
     )

我可以将console.log正常但是在使用逻辑时它不起作用所以在上面的例子中渲染不起作用但是console.log工作。

如果我尝试这样做，也会发生同样的事情

<script  type="text/javascript">var deviceType = <%- deviceType %></script>

答案

window在浏览器中始终可用，原始代码不会在客户端导致window is not defined错误。只有在服务器端呈现React应用程序时才会发生这种情况。

window.deviceType.isMobile ?表达式在服务器端进行评估，而onClick回调在客户端进行调用，因此不会导致错误。

Node.js中的global.window = global不合适，因为该值不是全局的，而是特定于当前请求的。

一种正确的方法是将deviceType与window分离，并以特定于React的方式为应用程序提供全局值，即通过prop，state或context。值可以从入口点作为prop传递。如果值正在使用，则可以将值存储到Redux存储中。或者可以使用React上下文使其在应用程序中全局可用：

export const DeviceTypeContext = React.createContext();

...

<DeviceTypeContext.Consumer>
  {deviceType => (
   <Menu.Item>
     {window.deviceType.isMobile ? (...) : (
             <div>PROBLEM</div>
      )}
    </Menu.Item>
  )}
</DeviceTypeContext.Consumer>

在客户端：

render(
  <DeviceTypeContext.Provider value={window.deviceType}>
    <App />
  </DeviceTypeContext.Provider>,
  ...
);

在服务器端：

renderToString(
  <DeviceTypeContext.Provider value={someVariable}>
    <App />
  </DeviceTypeContext.Provider>,
  ...
);