React中如何条件渲染同一组件两次且保留内部状态？

你遇到的状态丢失问题，本质是React的组件卸载机制导致的：当条件渲染的分支切换时，不满足条件的组件会被完全卸载，其内部状态会被销毁；再次渲染该分支时，会创建全新的组件实例，自然无法保留之前的状态。

下面提供几种可行的解决方案，根据你的需求选择：

方案1：用CSS控制显示/隐藏（保留双实例状态） #

如果必须同时维护两个ComponentToRender实例的独立状态，不要用条件渲染卸载组件，而是让两个实例始终挂载，通过CSS切换可见性：

import ComponentToRender from '../../ComponentToRender'
import { useState } from 'react'

const Main = () => {
  const [expand, setExpand] = useState(false)

  return (
    <div>
      <div style={{ display: !expand ? 'block' : 'none' }}>
        <ComponentToRender {...someProps} />
      </div>
      <div style={{ display: expand ? 'block' : 'none' }}>
        <ComponentToRender {...otherProps} />
      </div>
      <button onClick={() => setExpand(pre => !pre)}>Expand</button>
    </div>
  )
}

这种方式下，两个组件实例从初始化就存在于DOM中，只是通过display属性控制显隐，各自的内部状态会被完整保留。

方案2：提升状态到父组件（共享状态） #

如果不需要两个独立实例的状态，只是希望切换时保留用户输入或操作状态，可以将ComponentToRender的内部状态提升到父组件Main中，通过props传递给子组件：

假设ComponentToRender内部有需要保留的状态（比如输入框值），示例代码如下：

import ComponentToRender from '../../ComponentToRender'
import { useState } from 'react'

const Main = () => {
  const [expand, setExpand] = useState(false)
  // 把子组件的状态提升到父组件统一管理
  const [childState, setChildState] = useState('')

  // 根据expand状态选择对应的props集合
  const targetProps = expand
    ? { ...otherProps, value: childState, onChange: setChildState }
    : { ...someProps, value: childState, onChange: setChildState }

  return (
    <div>
      <ComponentToRender {...targetProps} />
      <button onClick={() => setExpand(pre => !pre)}>Expand</button>
    </div>
  )
}

这种方式下始终只有一个ComponentToRender实例（仅props变化），状态由父组件持有，切换时不会丢失。

方案3：通过相同key复用组件实例（特殊场景） #

如果坚持使用条件渲染的写法，可以给两个分支的组件设置相同的key，让React识别为同一个组件实例，从而保留状态：

import ComponentToRender from '../../ComponentToRender'
import { useState } from 'react'

const Main = () => {
  const [expand, setExpand] = useState(false)

  return (
    <div>
      {!expand && <ComponentToRender key="shared-component" {...someProps} />}
      {expand && (
        <div>
          <ComponentToRender key="shared-component" {...otherProps} />
        </div>
      )}
      <button onClick={() => setExpand(pre => !pre)}>Expand</button>
    </div>
  )
}

注意：这种方式下React会复用同一个组件实例，两个分支的组件本质是同一个，若props差异过大可能导致内部逻辑混乱，仅推荐在特殊场景下使用，优先选择前两种方案。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung