javascript - 从 React 组件中的脚本访问变量

Question

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

我在 Node 上进行设备检测并将此对象发送到 index.ejs 中的客户端(React)

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

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

比如这是react组件内部

    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>

Answer 1

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

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

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

一个合适的方法是将 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>,
  ...
);