React使用JSX和ES6加载动态模板

我对来自角度世界的React非常陌生。我有一个场景，我需要动态加载组件给一个searchType道具。最终用户将拥有可从中选择的searchTypes的下拉列表，该prop将在他们点击提交按钮后被传入。React使用JSX和ES6加载动态模板

我有一个SearchResult所组件定义，这应动态加载适当的组件取决于this.props.searchType.name

import React, { findDOMNode, Component, PropTypes } from 'react'; 
import Material from './Material'; // Material Search Results Component 
import Vendor from './Vendor'; // Vendor Search Results Component 

export default class SearchResults extends Component { 
    constructor(props){ 
    super(props); 
    } 


    // searchType = { 
    // name: 'Material', 
    // id: 'MATERIAL' 
    // } 

    render() { 
    const { searchType, items, itemsCount } = this.props; 

    var ComponentName = searchType.name; 

    return (
     <div className='row'> 
     <h1>Search Results ({items.length}/{itemsCount})</h1> 
     <ComponentName items={items} /> 
     </div> 
    ); 
    } 
} 

SearchResults.propTypes = { 
    items: PropTypes.array.isRequired 
};

现在值，这似乎部分地使用所述阵营开发工具中时作为工作铬我可以看到提供者/组件显示在DOM ..但它不呈现。

我只是不确定下一步要去哪里，或者如果我做错了什么。

来源

2015-10-13 gorelative

您试图使用字符串而不是实际的类。我想你想要的东西是这样的：

var searchTypes = { 
    Material, 
    Vendor, 
}; 

// ... 

    var Component = searchTypes[searchType.name]; 

    return (
     <div className='row'> 
     <h1>Search Results ({items.length}/{itemsCount})</h1> 
     <Component items={items} /> 
     </div> 
    );

这是simple example。

来源

2015-10-13 17:33:08 JMM

感谢这个完美的作品..还有一两件事，因为它是要在此代码，下一步是动态加载组件...'从“./” +组件名组件名进口我没提;'或者如果有办法将这些不同的组件从一个基类中扩展出来并导入整个基类和它的所有子类？无论哪种方式，感谢您的快速响应！ – gorelative

'import'声明是静态的，所以你不能这样做。最终会有一个动态模块加载器。现在，您可以动态生成'import'声明作为构建步骤的一部分。您还可以创建一个模块，导入并重新导出（以某种方式）所有组件，然后将其导入该组件。 – JMM

其实我最终做了一个导入*作为模板，然后在构造函数中迭代它，并推动搜索类型似乎工作？ – gorelative

您可以尝试一个switch语句。

render() { 
    //... 
    var component; 

    switch(searchType.name){ 
    case "material": 
     component = <Material items={items} /> 
    case "vendor": 
     component = <Vendor items={items} /> 
    } 

    return (
    //... 

    {component} 
) 
}

来源

2015-10-13 17:39:05

React使用JSX和ES6加载动态模板

回答

相关问题