动态渲染反应组件

Question

我是反应灵的新手，我很难理解这个错误。

我已经读过这篇文章，似乎解决方案就在那里，但我在如何正确实现这一点上空白了：

https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

我正在尝试根据点击元素的classNames渲染组件。 classNames与组件名称匹配。当我单击一个元素时，它会调用一个函数，将我的应用程序的状态设置为该元素className。然后，我根据新状态渲染组件。

测试时，如果我将组件直接放入我的应用程序（不动态呈现组件名称），它就可以正常工作。但是，当我动态渲染组件名称时，认为它是一个内置的DOM元素并且根本无法正确呈现。

在此图像中，您可以看到彼此相邻的两个组件：

both components, first directly added, and the second with the name rendered dynamically

这是我的应用程序组件代码，它呈现了所有内容：

import React, { Component } from 'react';
import logo from '../logo.svg';
import '../css/App.css';
import menus from '../menus';
import MainNav from './MainNav';
import Products from './Products';
import Demos from './Demos';
import Industry from './Industry';
import Customers from './Customers';
import Trials from './Trials';
import Contact from './Contact';
import Newsroom from './Newsroom';
import About from './About';
import Home from './Home';



class App extends Component {

    constructor() {
        super();
        this.chooseComponent = this.chooseComponent.bind(this);
        this.state = {
            allMenus: menus,
            componentMenu: menus,
            //sets initial component to load, changes on each click to the clicked component
            clickedComponent: Home

        };
    }  

    chooseComponent(event) {
            //save the classname of the menu i click
            var clickedComp = event.target.className;
            //saves a reference to a json object for later use
            var menu = menus[clickedComp];
            //adds those two vars to the state
            this.setState({
                componentMenu: menu,
                clickedComponent: clickedComp
            }); 
    }

    render() {
        //saves a var for rendering the currently clicked component
        var ActiveComponent = this.state.clickedComponent;
    return (

      <div className="App">
        <MainNav choose={this.chooseComponent}/>
        //renders the components directly without issue
        <Products menuData={this.state.componentMenu} />
        //renders the component dynamically with problems
        <ActiveComponent menuData={this.state.componentMenu} />
      </div>
    );
    }
}

export default App;

这是我在App中呈现的一个组件的示例：

import React from 'react';
import products from '../products';
import ProductsMenu from './ProductsMenu';
import Platform from './Platform';
import Applications from './Applications';
import ExMachina from './ExMachina';
import ProductsHome from './ProductsHome';
import Submenu from './Submenu';
import menus from '../menus';



class Products extends React.Component {
    constructor() {
        super();
        this.showContent=this.showContent.bind(this);
        this.state = {
            productsOverview: products,
            content: <ProductsHome />
        }
    }

    render(props) {

        return (
                <div className="content">
                    {this.state.content}   
                </div>

             );
    }
}
export default Products;