React技术咨询：点击当前组件按钮显示新组件并隐藏原组件

对于React新手来说，用状态控制组件渲染是实现这个需求最直接的方式，核心思路就是用一个布尔状态判断当前该显示哪个组件，点击按钮时切换状态值就行。

直接上代码示例，一看就懂：

import { useState } from 'react';

// 带按钮的原组件
function OriginalComponent({ onSwitch }) {
  return (
    <div>
      <h3>初始组件</h3>
      <button onClick={onSwitch}>点击显示新组件</button>
    </div>
  );
}

// 要切换到的新组件
function NewComponent() {
  return (
    <div>
      <h3>新组件</h3>
      <p>现在只显示这个新组件啦～</p>
    </div>
  );
}

// 控制逻辑的父组件
function App() {
  // 用状态标记是否显示新组件，初始为false（显示原组件）
  const [showNew, setShowNew] = useState(false);

  // 点击按钮时切换状态
  const handleSwitch = () => {
    setShowNew(true);
  };

  // 三元运算符判断渲染哪个组件
  return (
    <div>
      {showNew ? <NewComponent /> : <OriginalComponent onSwitch={handleSwitch} />}
    </div>
  );
}

export default App;

关键逻辑说明： #

• useState创建的showNew状态是核心开关，初始值false表示默认展示原组件。
• 原组件通过props接收点击回调onSwitch，点击按钮时触发这个回调，把showNew改成true。
• 父组件里用三元运算符{条件 ? 组件A : 组件B}决定渲染内容，状态切换后就只会显示新组件，原组件完全被替换掉。

如果你的需求是页面级别的跳转（比如切换不同路由页面），可以用React Router，但组件级别的切换用上面的方法足够简单，适合新手理解。

内容的提问来源于stack exchange，提问作者Vakamalla datha Pooja