从Import动态渲染React组件

时间:2016-10-02 18:14:26

标签: javascript reactjs

我希望能够渲染动态创建的组件。一个简单的例子。

动态数据

import * as Positions from '../../../Positions/index' //Contains the imports

const data = [
    {
        name: 'Hand Give',
        icon: 'hand_give',
        code:1,
        selected: false
    },
    {
        name: 'Hand Receive',
        icon: 'hand_receive',
        code:2,
        selected: false
    }
];

 ... other stuff....

render (){
    return (
        <div>
            {
                data.map((item, index) => {
                    const Pos = Positions[item['icon']];
                    console.info(Pos); //outputs function hand_give ()...
                    return <div key={item.code} >
                            <Pos />
                        </div>
                    }
                )
            }
        </div>
    )
}

位置/ index.js

export hand_give from './hand_give';
export hand_receive from './hand_receive';

来自职位/指数的典型导入

import React from 'react';

export default class hand_give extends React.Component {
    render(){
        return ( <div>
                     <h2>jamie</h2>
                </div>
            );
    }
}

我相信这应该会渲染组件而且我很不高兴为什么它没有

0 个答案:

没有答案