单页应用，渲染的组件类型如何由接口控制？

Question

现在有一个首页，有三个组件A，B，C都可以被渲染在页面中

import A from 'A';
import B from 'B';
import C from 'C';

具体如何渲染需要调用接口才知道
例如接口返回[a,a,b]页面渲染

render() {
        return (
            <div>
                <A />
                <A />
                <B />
            </div>
        );
    }
    

接口返回[a,c,b]页面渲染

render() {
        return (
            <div>
                <A />
                <C />
                <B />
            </div>
        );
    }

这要怎么控制？< />也没法传参呀？？？？

Answer 1

var apiData = ... //从服务端获取的数据，就不处理了
render() {
        let compoentList = {A:<A />;B:<B />;C:<C />}
        return (
            <div>
                {apiData.map((item)=> compoentList[item])}
            </div>
        );
    }

Answer 2

https://cn.vuejs.org/v2/guide...动态组件

用动态组件喽, 根据后端返回的值来判断应该加载的组件的名字, 然后进行异步加载组件

图中的activeComponent的值就是后端返回数据后你判断得出的组件名, 我这是个例子并没有写和后端交互的部分, 按实际情况写个流程判断就ok

---

如何传数据?

父组件:

子组件定义个props

---

继续补充一个, 就是这个父组件也可以用函数化组件, 性能更优

函数化组件

Answer 3

可以添加判断逻辑啊