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

Question

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

我正在 Node 上进行设备检测并将此对象发送到 index.ejs

内的客户端（React）

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

React 组件内部如果我 console.log window.deviceType 我看到它运行很好但是如果我尝试使用它它说 错误, window 未定义.

比如这是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 in Node.js 不合适，因为该值不是全局的，而是特定于当前请求的。

一种正确的方法是将 deviceType 与 window 解耦，并以特定于 React 的方式为应用程序全局提供一个值，即通过属性、状态或上下文。一个值可以作为 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>,
  ...
);

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

Access variable from script inside React component

javascript

window

script-tag

node.js

reactjs