0

我正在尝试使用 Remix 将一些环境变量导入浏览器，我一直在关注这个：

https://remix.run/docs/en/v1/guides/envvars

我完全按照步骤 1 和 2 进行操作，但是我无法window.ENV从浏览器访问。我收到此错误：ReferenceError: window is not defined

这是我非常简单的组件：

function Test() {
  console.log('Window: ', window);
  return <div>Hello, Test</div>;
}

export default Test;

如果我注释掉，console.log我可以<script>在<body>文档顶部看到window.ENV = {...}内容。但是取消注释console.log会向我显示错误消息并且没有<script>标签。这告诉我问题在于window.ENV文档中的设置，而不是我的组件中的设置。

任何想法将不胜感激！

4

2 回答 2

1

您无法访问window该代码中的对象（组件渲染），因为它在服务器上（因为服务器端渲染）和客户端上都运行（就像常规客户端 React 应用程序一样）。在服务器上没有window对象或任何其他浏览器 API。因此，您需要以这种方式编写该代码，以便它可以在服务器和客户端上运行。

您仍然可以window稍后使用对象，例如在useEffect或某些onClick处理程序中，因为此代码将仅在客户端运行：

// both this cases will work fine
  useEffect(() => {
    console.log(window.ENV);
  }, []);

// ...

      <button
        onClick={() => {
          console.log(window.ENV);
        }}
      >
        Log env
      </button>

但有时你需要那些 env 值，直接在 render 方法中。您可以将loader函数与useLoaderData钩子结合使用，如下所示：

export function loader() {
  // process.env is available here because loader runs only on the server side
  return {
    SOME_SECRET: process.env.SOME_SECRET
  };
}

export default function Index() {
  const data = useLoaderData();

  // here you can use everything that you returned from the loader function
  console.log(data.SOME_SECRET);

  return <div>{/* ... */}</div>
}
于 2022-01-22T13:24:07.450 回答
0

在 react 的组件级别范围内，如果不使用 useEffect 挂钩调用然后从那里引用窗口，就无法访​​问窗口对象可见的 dom。

于 2022-01-16T19:25:26.203 回答