Question

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

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

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

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

例如，这是在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

template_string = "class=btn 'submit-button %{additional_classes}'" # ↑ ↑ format(template_string, additional_classes: 'some-class') #=> "class=btn 'submit-button some-class'" # ↑↑↑↑↑↑↑↑↑↑↑在浏览器中始终可用，并且原始代码不会在客户端导致window错误。仅当React应用程序在服务器端呈现时，这种情况才会发生。

window is not defined表达式是在服务器端求值的，而window.deviceType.isMobile ?回调是在客户端调用的，因此不会引起错误。

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

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

window

在客户端：

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>,
  ...
);

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

1 个答案: