React.js中如何通过按钮点击调用子组件（不使用路由）

不用路由的情况下，最直接有效的方式就是通过父组件的状态变量控制子组件的条件渲染，核心思路是用状态决定子组件是否被挂载到DOM中。

基础实现示例 #

import { useState } from 'react';

// 目标子组件
const TargetChild = () => {
  console.log('子组件已渲染');
  return <div>这是点击按钮后才会出现的子组件内容</div>;
};

// 父组件
export default function Parent() {
  // 用状态控制子组件的显示/隐藏，初始为false（不显示）
  const [showChild, setShowChild] = useState(false);

  // 按钮点击事件：切换子组件的显示状态
  const toggleChild = () => {
    // 若需点击一次永久显示，用setShowChild(true)；需反复切换则用下面的写法
    setShowChild(prevState => !prevState);
  };

  return (
    <div className="parent-container">
      <button onClick={toggleChild}>
        {showChild ? '隐藏子组件' : '显示子组件'}
      </button>
      {/* 关键逻辑：只有当showChild为true时，子组件才会被渲染 */}
      {showChild && <TargetChild />}
    </div>
  );
}

为什么之前用Props/Context没生效？ #

大概率是你只是把状态通过Props/Context传递给子组件，但没有在父组件的JSX中做条件判断——哪怕子组件内部用传入的状态控制自身内容显示，父组件依然会默认渲染整个子组件（只是子组件内部内容隐藏）。而上面的写法是直接控制子组件是否被挂载，完全符合你“仅在点击时调用子组件”的需求。

进阶场景：切换多个子组件 #

如果需要点击不同按钮显示不同子组件，可以用状态存储要渲染的组件：

import { useState } from 'react';
const ComponentA = () => <div>组件A内容</div>;
const ComponentB = () => <div>组件B内容</div>;

export default function Parent() {
  const [activeComponent, setActiveComponent] = useState(null);

  return (
    <div>
      <button onClick={() => setActiveComponent(<ComponentA />)}>显示组件A</button>
      <button onClick={() => setActiveComponent(<ComponentB />)}>显示组件B</button>
      <button onClick={() => setActiveComponent(null)}>清空组件</button>
      {/* 渲染当前选中的组件 */}
      {activeComponent}
    </div>
  );
}

这种方式完全不需要路由，仅通过React自身的状态管理就能精准控制子组件的渲染时机。

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