react如何根据接口数据渲染不同组件?

Question

我做了一堆组件 每个组件对应一个机器类型
接口数据

res = [
{type:"Car"},
{type:"Tank"}
]
好像不能动态命名
只能写个switch吗?我这上百个不同机器呀 每个对应一个ui
res.map(x=><${x.type}/>)

Answer 1

可以手动做一个映射

import Car from './Car';
import Tank from './Tank';

const maps = {
    'Car':Car,
    'Tank':Tank,
}

class App extends Purecomponent{
    render(){
        return (
            <div>
                {
                    res.map((d,i)=>{
                        const C = maps[d.type];
                        return <C key={i} />
                    })
                }
            </div>
        )
    }
}

Answer 2

1、不知道是否一个组件对应一台机器，如果是，可以定义一个字段跟组件绑定，例如 Car、Tank,组件上使用条件判断是否显示 x.type === 'Car'
2、如果不是， 条件里面 加多几个 x.type === 'Car' || x.type === 'Tank'

Answer 3

看你这堆组件的UI差别大不大，如果差别不大，可以把机器类型作为props传递进去，如果差别太大，估计只能一个一个判断了。