为什么客户端不能使用上下文？

Question

在

routes/index.tsx

我有：

import GrandChildComponent from "../components/GrandChildComponent.tsx";
import { Username } from "./context.ts";

export default function App() {
    return (
        <Username.Provider value="Bob">
            <GrandChildComponent />
        </Username.Provider>
    )
}

在

./context.ts

我有：

import { createContext } from 'preact'
export const Username = createContext('alice')

如果打开

components/GrandChildComponent.tsx

我使用：

import { Username } from "../context.ts";

export default function GrandChildComponent(){
    return (
        <Username.Consumer>
            {username => (
              <span>{username}</span>
            )}
        </Username.Consumer>
    )  
} 

那么结果就是预期的

Bob

。但如果我将

GrandChildComponent

移动到

islands

文件夹，那么结果就是

Alice

。

如果我使用

useContext

钩子，这种情况仍然会发生：

import { useContext } from "preact/hooks";
import { Username } from "../context.ts";

export default function GrandChildComponent(){
  const username = useContext(Username)
  return <span>{username}</span>
} 

为什么上下文不能在客户端工作？就我而言，我需要读取配置文件并将数据传递给客户端进行处理，因此提供者需要位于服务器上，而消费者需要位于客户端上。

Answer 1

这里是新维护者：

Fresh 不支持通过上下文与浏览器中的孤岛共享来自服务器的数据（请参阅 https://github.com/denoland/fresh/issues/983 ）。在 Fresh 中从服务器与岛屿共享数据的唯一方法是通过 props。

这不起作用的原因是，一旦浏览器收到初始 HTML，岛屿就会重新呈现。但由于上下文提供程序仅存在于服务器上，而不存在于浏览器中，因此它将回退到默认值。