Facebook 动态渲染react组件

我是reactjs的新手，对这个bug的理解让我很费劲

我读过这篇文章，看起来解决方案就在那里，但我在如何正确实现这一点上还是一片空白：

我试图根据单击元素的类名呈现组件。类名与组件名匹配。当我单击一个元素时，它会调用一个函数，该函数将我的应用程序的状态设置为该元素的类名。然后根据新状态渲染组件

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

在此图像中，您可以看到两个组件，它们彼此相邻渲染：

以下是呈现所有内容的我的应用程序组件代码：

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;

import React，{Component}来自'React'；
从“../logo.svg”导入徽标；
导入“../css/App.css”；
从“../menus”导入菜单；
从“/MainNav”导入MainNav；
从“./产品”进口产品；
从“/Demos”导入演示；
从“./行业”导入行业；
从“./客户”导入客户；
从“./Trials”导入试用；
从“./Contact”导入联系人；
从“./Newsroom”导入新闻编辑室；
从“/关于”导入关于；
从“./主页”导入主页；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.chooseComponent=this.chooseComponent.bind（this）；
此.state={
所有菜单：菜单，
组件菜单：菜单，
//设置要加载的初始组件，每次单击时对单击的组件进行更改
单击组件：主页
};
}  
选择组件（事件）{
//保存我单击的菜单的类名
var clickedComp=event.target.className；
//保存对json对象的引用以供以后使用
变量菜单=菜单[单击组合]；
//将这两个变量添加到状态
这是我的国家({
组件菜单：菜单，
Clicked组件：Clicked组件
}); 
}
render（）{
//保存用于呈现当前单击组件的变量
var ActiveComponent=this.state.clickedComponent；
返回(
//直接渲染组件而不会出现问题
//动态呈现有问题的组件
);
}
}
导出默认应用程序；

下面是我的一个组件在应用程序中呈现时出现问题的示例：

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;

从“React”导入React；
从“../products”进口产品；
从“/ProductsMenu”导入ProductsMenu；
从“./Platform”导入平台；
从“./Applications”导入应用程序；
从“/ExMachina”导入ExMachina；
从“/ProductsHome”导入ProductsHome；
从“./子菜单”导入子菜单；
从“../menus”导入菜单；
类产品扩展了React.Component{
构造函数（）{
超级（）；
this.showContent=this.showContent.bind（this）；
此.state={
productsOverview：产品，
内容：
}
}
渲染（道具）{
返回(
{this.state.content}
);
}
}
出口默认产品；

那么，动态渲染时会出现什么实际问题？您说“根本无法正确呈现”是指产品组件不在主组件内，而是在其旁边呈现？产品组件没有动态呈现时应该包含的任何内容。在我发布的图像中，正确呈现的产品组件创建了自己的结束标记，并在其内部呈现了其他子组件。动态节点没有这些，在通过React Developer工具查看时显示为灰色元素（与普通内置DOM节点相同）。希望唤醒师不会重现你的虫子。我动态渲染了一个存储在状态中的组件，它工作得很好，让我知道它与您的组件之间的区别：最终组件不应该真正存储在状态中，状态应该是最小的。它应该只包含呈现组件所需的数据，而不是整个组件本身。我猜这与我如何把东西嵌套在一起有关，最后可能是一些非常愚蠢/明显的事情。我以前有一个switch语句工作得很好，但我想我可以用更少的代码来实现它。我将尝试想出一种更聪明的方法来实现这一点，而不必将这些组件存储在状态中。也许回到那个switch语句吧！：）