Question

我想知道如何在React中将显示的一些元素从hide更改为visible。我有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>

Answer 1

您可以使用conditional rendering。

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。

Answer 2

在名为activeSection的父容器中保留状态App。然后，将其作为道具传递给子节组件About，Skills等。还要添加方法handleToggleSection，您可以单击该方法以单击按钮并更改状态{ {1}}到相应的节名称。在所有activeSection，About等部分组件中，检查当前的部分名称。如果名称匹配，则返回html或返回Skills。请记住，当您返回null时，该组件不会挂载。如果您希望无论组件是否可见都保持它们的安装状态，那么您需要使用null，show等css类。

这是演示。

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

如何在React中更改显示onclick？

2 个答案: