如何在 TSX 中渲染由字符串确定的反应组件

Question

我想实现基于url中hash变化的导航。

例如对于 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} />
 );