Question

我要在这里实现的目的是能够通过单击按钮从App组件移至Page1组件。

我得到的结果是

第1页让我们开始吧来！

我想要实现的结果是

第1页

请指出我在这里做错了。谢谢。

import React, { Component } from 'react';
import Page1 from './comps/Page1';

class App extends Component {

  state = { 
    page:0
  }

  HandlePage = () => {
    this.setState({
       page:1
    })
  }

  render() {
    let comp = null;
    if(this.state.page === 1){
      comp = <Page1/>
    }

    return (
      <div className="App">
        {comp}
        <h1>Let's get started!!</h1>
        <div className="button">
          <button 
          type="submit"
          onClick={this.HandlePage}
          >GO</button>
        </div>
      </div>
    );
  }
}

export default App;

//Page 1 Component 
import React, { Component } from 'react';

class Page1 extends Component {
  render() {
    return (
      <div className="App">
        <h1>Page 1</h1>
      </div>
    );
  }
}

export default Page1;

Answer 1

以下是如何通过条件渲染实现此目标的摘要：

const Component = React.Component;

class App extends Component {

  state = { 
    page:0
  }

  handlePage = () => {
    this.setState({
       page:1
    })
  }

  render() {
    let Comp = null;
    if(this.state.page === 1){
      Comp = <Page1/>
    } else if(this.state.page === 0) {
      Comp = <StartPage handlePage={this.handlePage} />
    }

    return (
      <div className="App">
        {Comp}
      </div>
    );
  }
}

function StartPage(props) {
  return (
    <div>
      <h1>Let's get started!!</h1>
      <div className="button">
        <button 
          type="submit"
          onClick={props.handlePage}
        >GO</button>
      </div>
    </div>
  );
}

class Page1 extends Component {
  render() {
    return (
      <div className="App">
        <h1>Page 1</h1>
      </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>

如果要显示的页面更多，建议您使用React Router

之类的解决方案

从一个组件（页面）转移到另一组件（另一页面）

1 个答案: