如何在React中的几个部分中制作一个常见的H1元素

Question

如何为各节制作一个常见的H1元素：技能和关于。如果单击“技能”按钮，则H1更改为“技能”，如果单击“关于btn”，则将H1更改为“关于”。我仅在这两个部分需要这个h1元素，并且在css中由相同的值振荡。对于“开始”部分，不应该这样。我应该使用州/道具吗？

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

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

    render() {
      if(this.show) {

        return (
          <div className='contact'>
        <h1>kontakt!</h1>
          <a href='' target='_blank'>
            <img src='' />
          </a>
          <a href={cvpdf} target='_blank'>
            <img src='' />
          </a>
          <a href='' target='_blank'>
            <img src='' />  
          </a>
          <a className="mailto" href="">
          <img src='' />
          </a>
        </div>
      );
    } else {
      return null;
    };
    };
  };

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

    render() {
      if (this.show) {

        return (
          <div className='intro skills'>
          <h1>skills</h1>
          <img src='' alt=''/>
          <img src='' alt=''/>
          <img src='' alt=''/>
          <img src='' alt=''/>
          <img src='' alt=''/>
          <img src='' alt=''/>
          <img src='' alt=''/>
          <img src='' alt=''/>
        </div>
      );
    } else {
      return null;
    };
    };
  };

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

    render() {
      if (this.show) {
        
        return (
          <div className='intro about'>
         <h1>about</h1>
         <p>
            Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
         </p>
        </div>
      );
    } else {
      return null;
    };
    };
  };

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

    render() {
    if (this.show) {

        return (
            <div className='intro start'>
              <h1>Name Surname</h1>
              <p>Content Content Content Content Content Content </p>
              <h2>Content Content Content Content Content Content Content Content </h2>
          </div>
      );
    } else {
        return null;
    };
    };
  };

const Main = ({ activeSection }) => (
    <React.Fragment>
      <div className="container border">
          <Start activeSection={activeSection}/>
          <About activeSection={activeSection}/>
          <Skills activeSection={activeSection}/>
          <Projects activeSection={activeSection}/>
          <Contact activeSection={activeSection}/>
        </div>
    </React.Fragment>
);

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>
);

class App extends 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"));

<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>
<div id="root"></div>