ReactJS：如何向父组件最优传递条件渲染的子组件列表？

你的疑问答案：是的，所有子组件都会被实际渲染 #

你当前的写法里，在App组件中直接传入<Child1 />这种JSX元素时，React会立即创建这些组件的实例——也就是说，不管Parent里有没有条件显示它们，Child1到Child5的组件代码（函数体或者生命周期）都会执行，包括它们内部的useState、useEffect等钩子都会触发，完全达不到“只渲染当前激活组件”的目的。

最优处理方案：延迟组件实例的创建 #

核心思路是不直接传递已创建的组件实例，而是传递组件的定义或渲染逻辑，让Parent在需要的时候再去渲染对应的组件。下面是几种常用的实现方式：

方式1：传递组件定义数组（最简洁） #

直接把组件的类/函数本身传给Parent，而非实例化后的JSX：

const App = () => {
  return (
    <>
      <Parent childList={[Child1, Child2, Child3]} />
      <Parent childList={[Child4, Child5]} />
    </>
  )
}

const Parent = ({ childList }) => {
  const [activeChild, setActiveChild] = useState(0);
  // 拿到当前激活的组件定义
  const ActiveComponent = childList[activeChild];

  return (
    <div>
      {/* 只有当前组件会被实例化渲染 */}
      {ActiveComponent && <ActiveComponent />}
      <button 
        onClick={() => setActiveChild(prev => (prev + 1) % childList.length)}
        disabled={childList.length === 0}
      >
        切换子组件
      </button>
    </div>  
  )
}

方式2：支持传递组件props的版本 #

如果需要给子组件传递自定义props，可以改成传入包含组件和props的对象：

const App = () => {
  return (
    <>
      <Parent 
        childList={[
          { component: Child1, props: { title: "首页" } },
          { component: Child2, props: { count: 20 } },
          { component: Child3 }
        ]} 
      />
    </>
  )
}

const Parent = ({ childList }) => {
  const [activeChild, setActiveChild] = useState(0);
  const currentItem = childList[activeChild];

  return (
    <div>
      {currentItem && <currentItem.component {...currentItem.props} />}
      <button 
        onClick={() => setActiveChild(prev => (prev + 1) % childList.length)}
        disabled={childList.length === 0}
      >
        切换子组件
      </button>
    </div>  
  )
}

方式3：传递渲染函数数组（灵活度最高） #

如果子组件的渲染逻辑比较复杂（比如需要依赖Parent内的状态），可以传递渲染函数，延迟执行渲染：

const App = () => {
  return (
    <>
      <Parent 
        childList={[
          () => <Child1 />,
          () => <Child2 theme="dark" />,
          () => <Child3 onClick={() => console.log("点击了")} />
        ]} 
      />
    </>
  )
}

const Parent = ({ childList }) => {
  const [activeChild, setActiveChild] = useState(0);
  const renderCurrentChild = childList[activeChild];

  return (
    <div>
      {/* 调用渲染函数生成组件实例 */}
      {renderCurrentChild && renderCurrentChild()}
      <button 
        onClick={() => setActiveChild(prev => (prev + 1) % childList.length)}
        disabled={childList.length === 0}
      >
        切换子组件
      </button>
    </div>  
  )
}

以上三种方式都能保证只有当前激活的子组件会被实际渲染，其他组件的初始化逻辑不会执行，完全符合你的需求。

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