多次切换组件以显示不同的输出

Question

我说了 5 个按钮，我想在其中显示不同的内容。

这 5 个东西中的每一个都是它自己的组成部分。我想说的是单击一个按钮，显示一个组件，然后单击另一个按钮，然后删除前一个组件并显示另一个组件，依此类推......我想要一个切换开关，但如果一个组件仍然存在，则切换可以工作正在显示。

我陷入困境，单击按钮时我会显示各种内容这是我的主要组件

import React, { Component } from 'react';

import SecondaryButton from '../src/components/buttons/secondaryButton';
import WarningButton from '../src/components/buttons/warningButton';

import AllButtons from '../src/components/allButtons';
import PMPButtons from '../src/components/pmpButtons';

const sectionStyles = 'mt-5 border-b pb-5';

class App extends Component {
  state = { visible: true };
  PMPBtnState = { visible: false };

  render() {
    return (
      <div>
        <section id='response' className={sectionStyles}>
          <div className='mt-5 inline-flex space-y-4 flex-wrap'>
            <span></span>
            <WarningButton
              onClick={() => {
                this.setState({ visible: !this.state.visible });
              }}>
              All
            </WarningButton>
            <SecondaryButton onClick={() => console.log('clicked')}>General</SecondaryButton>
            <SecondaryButton
              onClick={() => {
                this.setState({ visible: this.PMPBtnState.visible });
              }}>
              PMP
            </SecondaryButton>
            <SecondaryButton onClick={() => console.log('clicked')}>RTB</SecondaryButton>
            <SecondaryButton onClick={() => console.log('clicked')}>VAST</SecondaryButton>
          </div>
        </section>

        {this.state.visible ? <AllButtons /> : null}

        {this.PMPBtnState.visible ? <PMPButtons /> : null}
      </div>
    );
  }
}

export default App;

任何建议

Answer 1

由于您可以在 React 组件的渲染部分执行一个函数，因此创建一个 display() 函数，该函数将根据不同按钮切换的状态显示另一个组件。因此，当 dashboardStatus === "component_A" 时，将显示您的 component_A。\

这是我过去为管理仪表板所做的类似事情的（一部分）示例：

const Admin = () => {
    const [dashboardStatus, setDashboardStatus] = useState("users");

    const switchDashboard = (x) => {
        setDashboardStatus(x);
    };

    const display = () => {
        if (dashboardStatus === "users") {
            return <UserDashboard />;
        } else if (dashboardStatus === "lessons") {
            return <FormationsDashboard />;
       }
    };

    return (
    <div>
           <button
              onClick={() => switchDashboard("users")}
              className="btn btn-secondary"
            >
            Utilisateurs
            </button>
            <button
              onClick={() => switchDashboard("lessons")}
              className="btn btn-secondary"
            >
            {display()}
    </div>
)

多次切换组件以显示不同的输出

Toggling components multiple times to display different outputs

javascript

toggle

reactjs