Reactjs 如何使用react动态创建和呈现JSX元素（从this.props定义）

因此，我想基于'this.props.x'创建并呈现一个JSX元素，其中'this.props.x'是从app.JSX传递下来的状态

我确实有一个解决办法，它工作得很好，但它真的很难看！这就是为什么我在寻找一种更优雅的方式

因此，我现在的做法是使用类似这样的if/else：

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

从“React”导入React
从“/inMenuTeam.jsx”导入团队；
从“/inMenuNews.jsx”导入新闻；
导出默认类GameArea扩展React.Component{
游戏阶段（第页）{
如果（页面==‘新闻’）{
返回
}
否则{
返回
}
}
render（）{
报税表（
{this.GameStage（this.props.newStage）}
);
}
};

我想做的是这样的事情：

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

导出默认类GameArea扩展React.Component{
游戏阶段（第页）{
返回
}
render（）{
报税表（
{this.GameStage（this.props.newgameseastage）}
);
}
};

其中“page”元素是父jsx文件传递的prop being。 上面的代码不起作用，但也没有给我提供一个错误，所以我觉得我已经接近理想的解决方案了

谢谢：）

（更新）

---

回过头来看，我意识到我实际上在寻找的是react路由器，您可以使用来获得更优雅的代码：

导出默认类GameArea扩展React.Component{
render（）{
返回(
{
this.props.newStage==='News'？：
} 
);
}
};

没有

页面

组件。类似的方法是：

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

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

const页面={
新闻:新闻,，
团队：团队，
}; // 这也可能是因为constpages={News，Team}的人手不足；
游戏阶段（第页）{
常数页=页[页]；
返回
}

---

您不能有动态内联组件名称，有关详细信息，请参阅。

这太完美了！干净，易于阅读，并且刻度非常好。谢谢你，安迪，这确实大大缩短了代码！我会记住这个语法，并在以后的项目实例中使用它：）Andy_D的答案更符合我的要求，但我非常感谢你花时间帮助我：）