React能否通过单个节点创建只读上下文？求免Provider方案及其他框架参考

React中的实现方式 #

原生React并没有开箱即用来匹配你需求的工具，但可以通过封装通用组件和Hook来完全实现你想要的效果，或者借助轻量状态管理库简化流程。

自定义封装实现 #

你可以自己封装一套通用的命名式上下文系统，完全匹配你给出的示例用法：

import React from 'react';

// 全局存储上下文实例的映射表
const contextRegistry = new Map();

// 通用上下文组件
export const ImaginaryContext = ({ name, values, children }) => {
  // 不存在则创建新上下文并注册
  if (!contextRegistry.has(name)) {
    const NewContext = React.createContext();
    contextRegistry.set(name, NewContext);
  }
  const TargetContext = contextRegistry.get(name);
  // 只传递值，不提供修改方法，确保只读
  return <TargetContext.Provider value={values}>{children}</TargetContext.Provider>;
};

// 对应的Hook
export const useImaginaryContext = (name) => {
  const TargetContext = contextRegistry.get(name);
  if (!TargetContext) {
    throw new Error(`未找到名为 "${name}" 的上下文`);
  }
  return React.useContext(TargetContext);
};

这个封装的用法和你给出的示例完全一致：父组件通过<ImaginaryContext>传递命名数据，子组件用useImaginaryContext按名称读取，且因为只传递原始值（不包含修改函数），天然是只读的。

现有工具库替代 #

如果不想自己封装，部分轻量状态管理库可以实现类似的跨组件只读数据访问：

• Zustand：可以创建命名的独立store，子组件直接通过store Hook读取数据，无需Provider嵌套，写法简洁。
• Jotai：通过原子（Atom）存储数据，子组件直接读取原子值，无需提前声明上下文结构。

不过最贴合你需求的还是上面的自定义封装，完全匹配你期望的API风格。

其他支持类似功能的JS框架 #

以下框架原生就支持这种"命名式、无需提前声明上下文"的只读数据传递：

Vue #

Vue的provide/inject API天生就是为这种场景设计的，无需提前定义上下文类型或对象：

父组件：

<template>
  <CarAd />
</template>

<script setup>
import { provide } from 'vue';
import CarAd from './CarAd.vue';

const car = getCarForSale();
const user = getUser();

// 注入命名的上下文数据
provide('carAdContext', { currentCar: car, loggedUser: user });
</script>

子组件：

<template>
  <h1>{{ currentCar.brand }}</h1>
  <h2>{{ currentCar.model }}</h2>
  <p>{{ currentCar.mileage }}</p>
  <p>{{ loggedUser.name }} is selling this car </p>
</template>

<script setup>
import { inject } from 'vue';

// 通过名称读取上下文数据
const { currentCar, loggedUser } = inject('carAdContext');
</script>

Svelte #

Svelte的setContext和getContext API同样支持命名式数据传递，语法极简：

父组件（App.svelte）：

<script>
  import { setContext } from 'svelte';
  import CarAd from './CarAd.svelte';

  const car = getCarForSale();
  const user = getUser();

  setContext('carAdContext', { currentCar: car, loggedUser: user });
</script>

<CarAd />

子组件（CarAd.svelte）：

<script>
  import { getContext } from 'svelte';
  const { currentCar, loggedUser } = getContext('carAdContext');
</script>

<h1>{currentCar.brand}</h1>
<h2>{currentCar.model}</h2>
<p>{currentCar.mileage}</p>
<p>{loggedUser.name} is selling this car </p>

SolidJS #

SolidJS的上下文系统结合provide和useContext可以实现类似效果，虽然需要提前创建上下文，但整体流程简洁，且支持命名式传递，无需复杂的类型声明。

内容的提问来源于stack exchange，提问作者Horacio García Magallanes