如何为可固定的React Portal模态框渲染不同子组件？

我用React Portal实现了一个基于Redux状态控制的可固定侧边抽屉模态框，内容根据触发固定操作的位置而定（比如通知模块）。现在遇到的问题是，模态框支持多位置触发固定，当模态框已经处于固定状态时，不知道该怎么处理不同的模态框内容。

我已经尝试/考虑过以下方案：

• 让单个Portal动态渲染子组件，但Portal的渲染位置不包含模态框的内容与逻辑，这个方案不可行；
• 对比props.children，若不同则渲染新Portal并销毁旧的，但我觉得有更优方案；
• 基于ID渲染Portal，按需销毁/重建已有Portal，我倾向于这个方案，但希望找到更好的解决办法。

Portal容器组件 #

export default function PaperContainer() {
  return <div id="pinned-container"></div>;
}

Portal组件 #

export default function PinnedContainer(props) {
  const pinned = useSelector(state => state.ui.isDrawerPinned);

  return (
    pinned &&
    createPortal(            
      <div>
        <div>{props.children}</div>
      </div>,
      document.getElementById('pinned-container')
    )
  );
}

Portal调用示例（简化版） #

export default function PortalCallLocationOne() {
  const dispatch = useDispatch();
  const pinContainer = () => {
       dispatch(toggleDrawer());
  };

  return  (
    <>
       <Button startIcon={<Icon>push_pin</Icon>} onClick={() => pinContainer}>
             Pin Notification
       </Button>
       <PinnedContainer>
             {/* Notification */}
       </PinnedContainer>
    </>
   );
}

export default function PortalCallLocationTwo() {
   const dispatch = useDispatch();
   const pinContainer = () => {
       dispatch(toggleDrawer());
   };
   return (
     <>
        <Button startIcon={<Icon>push_pin</Icon>} onClick={() => pinContainer}>
              Pin List
        </Button>
       <PinnedContainer>
          {/* List */}
       </PinnedContainer>
     </>
   );
}

方案1：在Redux状态中记录当前激活的抽屉内容标识 #

修改Redux的UI状态，不仅存储isDrawerPinned，还要存储当前激活的内容ID（比如activePinnedId）。然后在每个PinnedContainer中传入唯一ID，只有ID匹配时才渲染对应的内容。

实现步骤：

1. 更新Redux的state结构与reducer：

const initialState = {
  isDrawerPinned: false,
  activePinnedId: null // 新增：记录当前激活的内容ID
};

function uiReducer(state = initialState, action) {
  switch (action.type) {
    case 'TOGGLE_DRAWER':
      return {
        ...state,
        isDrawerPinned: !state.isDrawerPinned,
        // 切换固定状态时，若为固定则记录内容ID，取消固定则清空
        activePinnedId: !state.isDrawerPinned ? action.payload.id : null
      };
    default:
      return state;
  }
}

2. 修改PinnedContainer组件，增加id属性校验：

export default function PinnedContainer({ id, children }) {
  const { isDrawerPinned, activePinnedId } = useSelector(state => state.ui);

  // 仅当固定状态且ID匹配时渲染内容
  if (!isDrawerPinned || activePinnedId !== id) return null;

  return createPortal(            
    <div>
      <div>{children}</div>
    </div>,
    document.getElementById('pinned-container')
  );
}

3. 调整调用位置的触发逻辑，传递内容ID：

// PortalCallLocationOne
const pinContainer = () => {
  dispatch(toggleDrawer({ id: 'notification' }));
};

// 使用组件时传入ID
<PinnedContainer id="notification">
  {/* Notification内容 */}
</PinnedContainer>

// PortalCallLocationTwo同理
const pinContainer = () => {
  dispatch(toggleDrawer({ id: 'list' }));
};

<PinnedContainer id="list">
  {/* List内容 */}
</PinnedContainer>

方案2：将抽屉内容统一管理到单独组件 #

创建一个全局的抽屉内容管理器组件，根据Redux中的状态动态渲染对应内容，不再在多个位置重复渲染PinnedContainer。

实现步骤：

1. 创建PinnedDrawerContent组件，统一管理内容渲染：

export default function PinnedDrawerContent() {
  const { isDrawerPinned, activePinnedId } = useSelector(state => state.ui);

  if (!isDrawerPinned) return null;

  // 根据activePinnedId渲染对应内容组件
  switch (activePinnedId) {
    case 'notification':
      return <NotificationContent />;
    case 'list':
      return <ListContent />;
    default:
      return null;
  }
}

2. 在全局布局中仅渲染一次PinnedContainer：

// 比如在App.js或Layout组件中
<PinnedContainer>
  <PinnedDrawerContent />
</PinnedContainer>

3. 触发固定操作时更新Redux中的activePinnedId：

// PortalCallLocationOne的触发函数
const pinContainer = () => {
  dispatch({
    type: 'TOGGLE_DRAWER',
    payload: { id: 'notification' }
  });
};

// PortalCallLocationTwo同理

方案对比 #

• 方案1保留了在各个模块中定义抽屉内容的灵活性，适合内容逻辑分散在不同模块的场景；
• 方案2将抽屉内容集中管理，适合内容逻辑独立或需要统一控制的场景，减少重复的Portal渲染逻辑。

这两个方案都避免了重复渲染Portal或手动对比children的问题，通过Redux状态统一控制激活的内容，逻辑更清晰且易于维护。

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