あるコンポーネント（ページ）から別のコンポーネント（別のページ）への転送

debugcn 投稿 Dev

ジュンジョン|

ここで達成しようとしているのは、ボタンをクリックすることで、AppコンポーネントからPage1コンポーネントに移動できることです。

私が得ている結果は

Page 1始めましょうGo！

私が達成したい結果は

ページ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;

アグニー

条件付きレンダリングによってそれを実現する方法のスニペットを次に示します。

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>

表示するページがもっとある場合は、ReactRouterのようなソリューションを検討することをお勧めします

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]