如何在点击时加载不同的组件答案

【问题标题】：how to load a different component on click如何在点击时加载不同的组件
【发布时间】：2020-11-11 10:36:30
【问题描述】：

我正在尝试完成类似于单页的事情。我有下面的屏幕：

我想用另一个内容替换此内容。当您点击Add More credits 切换到下方屏幕并使用左箭头返回会员显示时：

我不知道该走哪条路。亲子？

欢迎任何想法或示例

谢谢

【问题讨论】：

到目前为止你尝试过什么？你能显示你当前的代码吗？
这能回答你的问题吗？ how to navigate from one page to another in react js?
@LukeStorry 这不是因为我不想使用Route 转到另一个页面我真的尝试替换内容。基本上，我在一个没有多个选项卡的设置页面中。一个标签显示我的会员资格。在同一个选项卡中，我想将内容替换为关于“信用捆绑包”的内容，并能够在单击返回箭头时返回会员身份

标签： javascript css reactjs

【解决方案1】：

使用 state 存储一个字符串，标识您要打开哪个选项卡，使按钮单击设置该状态，然后使用 Conditional Rendering 仅呈现您想要的选项卡。

超级简化的sn-p，但我希望你明白：

function CreditBundlesComponent() { return <h2> Credit Bundles</h2> }
function MembershipComponent(){ return <h2>Membership</h2> }

function App() {
  const [currentTab, setCurrentTab] = React.useState("MEMBERSHIP");
  return (
    <div>
       <button onClick={() => setCurrentTab("MEMBERSHIP")}>Membership</button>
       <button onClick={() => setCurrentTab("CREDIT")}>Credit Bundles</button>
       {(currentTab==="MEMBERSHIP") && <MembershipComponent/>}
       {(currentTab==="CREDIT") && <CreditBundlesComponent/>}
    </div>
  );
}

ReactDOM.render( <App /> , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：