如何向无关React组件传递JSX/组件？以模态框为例

核心思路是不在Store中直接存储JSX元素，而是存储返回JSX的渲染函数，让接收组件（比如Modal）在自身的React上下文内执行这个函数，确保hooks能正常工作，同时避免MobX等Store存储React元素的异常问题。

具体实现步骤 #

1. 调整Store的状态结构和方法 #

修改Store，让modal.content存储一个返回JSX的函数，而非直接存JSX元素：

// 示例MobX Store（可根据你的实际Store调整）
class AppStore {
  modal = {
    isVisible: false,
    content: () => null // 默认返回空内容
  };

  setModalContent(contentRenderer) {
    this.modal.content = contentRenderer;
    this.modal.isVisible = true; // 可合并显示逻辑
  }

  hideModal() {
    this.modal.isVisible = false;
    this.modal.content = () => null;
  }
}

2. 修改Modal组件，执行渲染函数 #

让Modal组件调用Store中存储的渲染函数，生成JSX：

// Modal.jsx
function Modal() {
  const store = useStore();

  if (!store.modal.isVisible) return null;

  // 在Modal的React上下文内执行渲染函数，保证hooks正常工作
  return <div className="modal">{store.modal.content()}</div>;
}

3. 触发组件中传递渲染函数 #

在触发组件中，直接传递一个返回目标JSX的函数给Store：

function ToggleThing() {
  const [isActive, setActive] = useState(false);

  return (
    <button onClick={() => setActive(!isActive)}>
      {isActive.toString()}
    </button>
  );
}

function SomeModalTrigger() {
  const store = useStore();

  return (
    <button
      onClick={() => {
        // 传递返回JSX的函数，而非直接传JSX元素
        store.setModalContent(() => <ToggleThing />);
      }}
    >
      触发模态框
    </button>
  );
}

方案优势 #

• 兼容hooks：渲染函数在Modal组件的React上下文内执行，useState等hooks能正常获取React的组件上下文，不会失效。
• 完全动态：不需要维护组件查找表，支持任意动态生成的JSX内容，满足复杂场景需求。
• 符合状态管理理念：Store中存储的是纯函数，不存在React元素序列化或上下文丢失的问题，也无需使用游离变量。
• 通用性强：不仅适用于模态框，任何需要跨无关组件传递动态JSX的场景都可以复用这个逻辑。

为什么直接存JSX会失效？ #

React元素（即<ToggleThing />编译后的结果）是包含组件信息和props的普通对象，但它本身不携带React上下文。当你把这个对象存入非React状态的Store后，在Modal组件中渲染它时，ToggleThing的hooks无法找到对应的组件上下文（创建上下文和渲染上下文不一致），导致hooks报错或失效。而存储渲染函数的方式，是让ToggleThing在Modal的上下文内被创建和渲染，完全符合React的工作机制。

内容的提问来源于stack exchange，提问作者Indigo