React动态渲染子组件在父状态变更时未触发重渲染问题咨询

这个需求完全可以在React标准生态内实现，核心是正确使用React Portal能力，避免手动创建独立的React根实例。

问题根因梳理 #

• 初始使用ReactDOM.createPortal不渲染：Portal本身是React元素，必须作为父组件render方法的返回值的一部分，才会被React纳入渲染调度，你之前在事件回调里单独调用createPortal没有返回给React，自然不会渲染。
• 改用ReactDOM.render后状态无法向下同步：手动调用render相当于在父组件所在的React根之外，单独创建了一个完全独立的React根实例，两个实例的更新流程完全隔离，父组件的state变化不会触发另一个根下组件的重渲染。
• 第二次调整Portal后子组件不更新：是因为传递给子组件的number属性写死为常量0，没有绑定父组件的state变量，父组件state变化时props没有变化，自然不会触发重渲染。

完整可运行实现 #

HTML结构 #

<div id="root"></div>
<div id="childPlaceholder"></div>

JS代码 #

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';

const childRoot = document.getElementById("childPlaceholder");
const root = ReactDOM.createRoot(document.getElementById("root"));

// 子组件，用Portal挂载到指定DOM节点
function Child({number, add}) {
  // 组件挂载后调用第三方动画库执行入场动效
  useEffect(() => {
    // NonReactAnimationLibrary.ShowContainer(childRoot);
    return () => {
      // 组件卸载前执行退场动效
      // NonReactAnimationLibrary.HideContainer(childRoot);
    }
  }, []);

  return ReactDOM.createPortal(
    <>
      <button onClick={() => add(number + 1)}>add number</button>
      <div>child {number}</div>
    </>, 
    childRoot
  );
}

function App() {
  const [data, updateData] = useState(0);
  const [showChild, setShowChild] = useState(false);

  function add(val) {
    updateData(val);
  }

  return (
    <>
      <button onClick={() => setShowChild(true)}>
        add child
      </button>
      <div> data: {data}</div>
      {/* Portal作为render的返回值，纳入React调度 */}
      {showChild && <Child number={data} add={add} />}
    </>
  );
}

root.render(<App />);

核心规则说明 #

• Portal仅改变DOM的实际挂载位置，组件的生命周期、props传递、context共享逻辑和普通嵌套的React组件完全一致
• 所有需要响应React状态变化的组件，都必须纳入同一个React根的调度树，不要手动调用ReactDOM.render创建独立根

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