Reactのクリックイベントに応じてコンポーネント呼び出し

Question

Reactでクリックされたボタンに応じて呼び出すコンポーネントを変えることはできるのでしょうか？

import Game1 from './Game1' // Game(1)コンポーネントを別ファイルに作成
import Game2 from './Game2' // Game(2)コンポーネントを別ファイルに作成
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>
    <div className="intro">Select type of Game!</div>
    <button type="button" className="square_btn" name="aaa" value="aaa">to GAME1</button>
    <button type="button" className="square_btn" name="bbb" value="bbb">to GAME2</button>
  </div>,
  document.getElementById('root')
  );

例えば上記のように、ボタンを２つ用意して、ボタン1が押されたらGame1を呼び出し、
ボタン2が押されたらGame2を呼び出して、どちらか表示させるようにしたいです。
またどちらかのボタンが押されたら画面上には対応するゲームのみ(ボタンも非表示)、にしたいです。

非常に初歩的な質問で恐縮ですが、お教えいただけますと幸いです。

Answer 1

「切り替えて表示する部分」全体を1つのコンポーネントにしてしまいましょう。状況に応じて外からrenderするのを差し替えるのはけっこう手間になります。

class Selector extends React.Component{
  state = { Component: null }

  selectGame1 = () => this.setState({Component: Game1})
  selectGame2 = () => this.setState({Component: Game2})

  render() {
    // 大文字始まりにしないと、JSXでコンポーネントと認識させられない
    const {Component} = this.state;
    if(Component) return <Component />;
    return(
      <div>
        <div className="intro">Select type of Game!</div>
        <button type="button" className="square_btn" name="aaa" value="aaa" onClick={this.selectGame1}>to GAME1</button>
        <button type="button" className="square_btn" name="bbb" value="bbb" onClick={this.selectGame2}>to GAME2</button>
      </div>
    );
  }
}

// 使う箇所では<Selector />をrenderする

Comments

[----]

maisumakunさん
回答ありがとうございます！大変わかりやすく、参考になりました。