Многократное переключение компонентов для отображения разных выходных данных

avatar
mrpbennett
1 июля 2021 в 18:42
31
1
0

У меня есть, скажем, 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;

Есть предложения

Источник

Ответы (1)

avatar
Lou
1 июля 2021 в 19:25
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>
)
mrpbennett
2 июля 2021 в 10:24
0

Спасибо, это работает ... пришлось кое-что настроить, но теперь все хорошо