reactjs - 如何在 React 中更改显示 onclick？

Question

我想知道如何在 React 中将显示的几个元素从隐藏更改为可见。我有 4 个部分和每个部分的按钮。开始部分有开始按钮，关于部分有关于按钮，技能部分有技能按钮，联系部分有联系按钮。当我单击开始时如何制作所有其他部分会立即显示：没有并且只有技能部分可见？通过单击关于按钮，其他人得到隐藏（无）并且只有关于是可见的？等到其他部分。

我知道我必须做一个handleonclick，但我知道怎么做。它应该与状态一起使用吗？

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>

  

标签： reactjshidedisplayvisible

Answer 1

activeSection在名为 的父容器中保留一个状态App。然后，将其作为道具传递给子部分组件About等Skills。还添加一个方法handleToggleSection，您可以在单击按钮时调用该方法并将状态更改为activeSection相应的部分名称。在所有部分组件中About，Skills等等，检查当前部分名称。如果名称匹配，则返回 html 或 return 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>