TSXで文字列で決まる反応成分をレンダリングする方法

Question

urlのハッシュ変更に基づいてナビゲーションを実現したい。

たとえばURL index.html＃HomePageの場合、アプリケーションはHomePageコンポーネントを読み込みます。

import { HomePage } from '../components/homepage' 
import { AnotherPage } from '../components/anoterpage' 


export class NavigationFrame extends React.Component<any, State> { 
    constructor(props) { 
     super(props); 
     this.state = { pageName: this.pageNameFromUrl() }; 
    } 

    onHashTagChanged =() => { 
     this.setState({pageName: this.pageNameFromUrl()}); 
    } 


    public render() { 
     var Page = this.state.pageName as any; 
     return <Page /> //this renders <homepage /> when this.state.pageName = "HomePage"; 
    } 
} 

文字列に基づいてコンポーネントを動的に作成する方法はありますか？

Answer 1

class CustomComponent extends React.Component{ 
    render(){ 
    return (
     var DynamicComponent = this.props.component; 
     return <DynamicComponent />; 
    ) 
    } 
} 

あなたのファイルにインポートして、以下のように使用し、

return (
     <CustomComponent component={this.state.pageName} /> 
);