Как изменить отображение по клику в React?

Question

Мне интересно, как изменить отображение нескольких элементов с скрытого на видимое в React. У меня есть 4 раздела и для каждой кнопки раздела. В разделе «Пуск» имеется кнопка «Пуск», в разделе «О разделе» - кнопка «О», в разделе «Навыки» - кнопка «Навыки», а в разделе «Контакты» - кнопка «Контакты». Как сделать это, когда я нажму «Пуск», все остальные разделы будут отображаться мгновенно: ни один и только раздел «Навыки» не виден? При нажатии кнопки «О» другие скрываются (нет), и отображается только «О»? И т.д. в другие разделы.

Я знаю, что я должен сделать ручку, но не знаю, как. Должно ли это работать с государством?

import React, { Component } from 'react';
    import ReactDOM from 'react-dom';

    class Start extends Component {
        render() {
          return (
              <div className='start'>
              </div>
          );
        }
      }

    class About extends Component {
        render() {
          return (
            <div className='about'>
            </div>
          );
        }
      }
      
      class Skills extends Component {
        render() {
          return (
            <div className='skills'>
            </div>
          );
        }
      }
      
     class Contact extends Component {
        render() {
          return (
            <div className='contact'>
            </div>
          );
        }
      }
      
    class Buttons extends Component {
        render() {
          return (
            <div className="buttons">
              <button>Start</button>
              <button>About</button>
              <button>Skills</button>
              <button>Contact</button>
            </div>
          );
        }
    }

    class App extends Component {

      render() {
        return (
          <div className="App">
            <Buttons />
            <Main />
          </div>
        );
      }
    }

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

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

  

Answer 1

Сохранить состояние activeSection в родительском контейнере с именем App.Затем передайте его в качестве реквизита компонентам дочернего раздела About, Skills и т. Д. Также добавьте метод handleToggleSection, который можно вызывать по нажатию кнопок и измените состояние activeSection на соответствующий раздел.название.Внутри всех компонентов раздела, About, Skills и т. Д., Проверьте имя текущего раздела.Если имя совпадает, верните html или верните null.Помните, что когда вы возвращаете null, этот компонент не монтируется.Если вы хотите, чтобы компоненты монтировались независимо от того, видимы они или нет, вам нужно использовать классы CSS, такие как show, hide и т. Д.

Вот демонстрационная версия.

// import React from "react";
// import ReactDOM from "react-dom";

class Start extends React.Component {
  get show() {
    return this.props.activeSection === "start";
  }

  render() {
    if (this.show) {
      return <div className="start"> Start </div>;
    } else {
      return null;
    }
  }
}

class About extends React.Component {
  get show() {
    return this.props.activeSection === "about";
  }

  render() {
    if (this.show) {
      return <div className="about"> About </div>;
    } else {
      return null;
    }
  }
}

class Skills extends React.Component {
  get show() {
    return this.props.activeSection === "skills";
  }

  render() {
    if (this.show) {
      return <div className="skills"> Skills </div>;
    } else {
      return null;
    }
  }
}

class Contact extends React.Component {
  get show() {
    return this.props.activeSection === "contact";
  }

  render() {
    if (this.show) {
      return <div className="contact"> Contact </div>;
    } else {
      return null;
    }
  }
}

const Buttons = ({ onToggle }) => (
  <div className="buttons">
    <button name="start" onClick={onToggle}>
      Start
    </button>
    <button name="about" onClick={onToggle}>
      About
    </button>
    <button name="skills" onClick={onToggle}>
      Skills
    </button>
    <button name="contact" onClick={onToggle}>
      Contact
    </button>
  </div>
);

const Main = ({ activeSection }) => (
  <React.Fragment>
    <Start activeSection={activeSection} />
    <About activeSection={activeSection} />
    <Skills activeSection={activeSection} />
    <Contact activeSection={activeSection} />
  </React.Fragment>
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSection: ""
    };

    this.handleToggleSection = this.handleToggleSection.bind(this);
  }

  handleToggleSection(e) {
    const { name } = e.target;
    this.setState(() => ({
      activeSection: name
    }));
  }

  render() {
    return (
      <div className="App">
        <Buttons onToggle={this.handleToggleSection} />
        <Main activeSection={this.state.activeSection} />
      </div>
    );
  }
}

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

.App {
  font-family: sans-serif;
  text-align: center;
}

.show {
  display: block;
}

.hide {
  display: none;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Вы можете использовать условный рендеринг .

selectSection = section => {
  this.setState({ section })
}

render() {
  return (
    <div className="App">
      <Buttons onClick={this.selectSection} />
      {this.state.section === "start" && <Start>}
      {this.state.section === "about" && <About>}
    </div>
  );
}

Также вместо if вы можете использовать switch.