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

Question

从 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>

Answer 1

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

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

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

一个正确的方法是将deviceType与window解耦，并以特定于 React 的方式为应用程序全局提供一个值，即通过 prop、state 或 context。 值可以从入口点作为道具传递。 如果某个值正在使用中，它可以存储到 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>,
  ...
);