如何将React元素存入变量后在其他组件渲染且不提升内部状态？

问题根因 #

你当前方案出现输入异常的核心原因是：通过useEffect仅在ComponentCreator挂载时传递了一次<input>元素的静态快照到App的state中，后续ComponentCreator内部value状态更新时，App state中存储的旧元素实例不会自动同步最新的状态绑定，因此输入一次后状态变化无法反映到App中渲染的输入框上，看起来就像只能输入一个字符。

解决方案 #

最贴合你需求（状态保留在ComponentCreator内部、可渲染到外部任意位置）的实现方式是使用React Portal，Portal的特性就是可以将组件渲染到当前父组件DOM树之外的任意节点，同时组件的状态、上下文完全保留在原组件内部，不需要做状态提升，也完美适配你提到的弹窗场景。

基础实现代码 #

import { useState, createPortal } from 'react';

// 你可以提前在HTML中定义弹窗挂载节点，比如<div id="dialog-root"></div>
const dialogRoot = document.getElementById('dialog-root') || document.body;

const ComponentCreator = () => {
  const [value, setValue] = useState('');

  const inputComponent = (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );

  return (
    <>
      {/* 组件内部可正常渲染该输入框 */}
      {inputComponent}
      {/* 同时通过Portal将输入框渲染到外部的dialog容器中，状态完全同步 */}
      {createPortal(inputComponent, dialogRoot)}
    </>
  );
};

export default function App() {
  return (
    <>
      <ComponentCreator />
      {/* 其他App业务内容 */}
    </>
  );
}

适配createDialogWithContent场景的实现 #

你可以调整弹窗逻辑和触发方法，配合Portal实现「触发即遗忘」的调用体验：

import { useState, createPortal } from 'react';

// 简单的弹窗状态管理
let updateDialogState = null;

// 弹窗容器组件
const DialogWrapper = () => {
  const [visible, setVisible] = useState(false);
  const [content, setContent] = useState(null);
  updateDialogState = (newContent) => {
    setContent(newContent);
    setVisible(true);
  };
  return visible ? <Dialog>{content}</Dialog> : null;
};

// 你需要的触发方法
export const createDialogWithContent = ({ content }) => {
  updateDialogState?.(content);
};

// 业务组件实现
const YourBusinessComponent = () => {
  const [value, setValue] = useState('');

  const inputComponent = (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );

  return (
    <>
      <button 
        onClick={() => createDialogWithContent({ content: inputComponent })}
      >
        打开带输入框的弹窗
      </button>
      {/* 状态更新时自动同步到弹窗的Portal内容 */}
      {createPortal(inputComponent, document.getElementById('dialog-root'))}
    </>
  );
};

export default function App() {
  return (
    <>
      <DialogWrapper />
      <YourBusinessComponent />
    </>
  );
}

内容的提问来源于stack exchange，提问作者but-why