React条件渲染子组件失效求助：切换Modal子组件无效果

问题根源 #

你定义的newChildren是普通let变量，React不会追踪普通变量的变化。当你在openPop里给它赋值后，组件不会触发重新渲染，所以ModalLogin的children属性始终是初始的undefined，导致切换失效。

解决方案 #

把newChildren改成React状态变量，用useState管理，这样变量变化时会触发组件重新渲染，更新子组件内容。

修改后的代码如下：

状态定义部分

const [modalActive, setModalActive] = useState(false);
// 用useState管理newChildren
const [newChildren, setNewChildren] = useState<ReactElement | undefined>(undefined);

点击事件函数部分

const openPop = (temp: string) => {
  console.log('temp', temp);
  if (temp === 'register') {
    // 用setNewChildren更新状态
    setNewChildren(<FormRegister closePop={closePop} registerSubmit={onRegisterSubmit} />);
  }
  if (temp === 'login') {
    setNewChildren(<FormLogin />);
  }
  setModalActive(true);
};

渲染部分保持不变

<header className="app-header">
  {newChildren && <ModalLogin isModal={modalActive} closePop={closePop} children={newChildren} />}
  <HeaderPublic schema={HeaderPublicLinkSchema} />
</header>

原理说明 #

React组件的重新渲染触发条件是状态(state)或属性(props)发生变化。普通变量的修改不会被React感知，而useState创建的状态变量，调用其更新函数时会通知React重新渲染组件，此时新的newChildren值会被传递给ModalLogin，实现子组件的切换。

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