Как динамически создавать и визуализировать элементы JSX, определенные из этого.props с реагированием

Question

Итак, я хочу создать и отобразить элемент JSX на основе 'this.props.x', где этот 'this.props.x' является состояние передано из app.jsx.

У меня есть обходное решение, которое отлично работает, но оно действительно уродливое! Вот почему я ищу более элегантный способ сделать это.

Так как я это сделать сейчас, с, если/иначе, как так:

import React from 'react' 

import Team from './inMenuTeam.jsx'; 
import News from './inMenuNews.jsx'; 

export default class GameArea extends React.Component{ 
    GameStage(page){ 
     if(page == 'News'){ 
      return <News /> 
     } 
     else{ 
      return <Team /> 
     } 
    } 
    render(){ 
     return( 
      <div> 
       {this.GameStage(this.props.newStage)} 
      </div> 
     ); 
    } 
}; 

Что я хочу сделать я что-то вроде этого:

export default class GameArea extends React.Component{ 
    GameStage(page){ 
     return <page /> 
    } 
    render(){ 
     return( 
      <div> 
       <GameMenuLeft handleMenuClick={this.props.handleMenuClick.bind(this)} /> 
       {this.GameStage(this.props.newGameAreaStage)} 
      </div> 
     ); 
    } 
}; 

Если «страница» элемент - это prop, передаваемый родительским файлом jsx. Выше код не работает, но также не дает мне ошибки, поэтому у меня возникает ощущение, что я близок к желаемому решению.

Спасибо :)

(ДОПОЛНЕНО) Оглядываясь назад, я понимаю, что то, что я был на самом деле искали, был реагировать-маршрутизатор

Answer 1

Нет page Компонент. Подобный способ сделать это будет:

const pages = { 
    News: News, 
    Team: Team, 
}; // this could also be shorthanded as const pages = { News, Team }; 

GameStage(page){ 
    const Page = pages[page]; 
    return <Page /> 
} 

Вы не можете иметь динамические имена встроенных компонентов, см this question для получения дополнительной информации.

Answer 2

для более элегантного кода, который вы можете использовать ternary operator :

export default class GameArea extends React.Component { 
    render() { 
    return (
     <div> 
     { 
     this.props.newStage === 'News' ? <News/> : <Team/> 
     } 
     </div> 
    ); 
    } 
};