React 高阶组件逻辑加载子组件

Question

一个选项卡，分别三项内容，我把三项内容分为三个组件，另外配置一个高阶组件用于逻辑加载组件，如图:

三个li里分别是选项列表，外部引入内容组件，Compon是引入的内容组件分别有三个，我想问的是在高阶组件中，怎样去加载引入的不同组件呢？  就在code-loaderBox里,我的想法是建立一个属性，然后通过点击li时的逻辑 把组件赋给这个属性，最后在div中只写那个属性就ok了，请问这种方法可行吗？或者说有没有更简便的方式;

Answer 1

谢邀~

首先我没太读懂你是想做什么, 我的理解是当你点击li, 切换下方的code-loaderBox去显示不同的组件?

其次, 看到你的代码我提几个意见, 仅供参考.

1. 不使用jquery, 用state去保存状态

2. li可以使用一个数组对象去封装好参数, 这样传参也比较方便, render之前可以动态生成一个list

const list;
list = 数组.map(function(o, i, objs){
    return <li onclick={this.onClick(i))} key={i} >{o.name}</li>
});

return中

<ul>
    {list}
</ul>

onClick中

    onClick(i){
        //传入的参数, 可以为任意含义的参数, 但必须唯一
        //根据不同情况去
        var status = 某种情况;
        this.setState({status: status});
    }

code-loaderBox中动态显示某些组件

<div>
   this.state.status == 某种情况 ? <某种情况下的组件 /> : null
   this.state.status == 某种情况 ? <某种情况下的组件 /> : null
   this.state.status == 某种情况 ? <某种情况下的组件 /> : null
   ...
   //多个的话也可以写一个switch
</div>

Answer 2

最简单最直接的办法，利用一个条件来决定是否渲染组件,通过更改这个条件来实现切换局部组件的渲染与取消。
伪代码：

let com;
if(true){
   com=<Component/>
}else{
   com=null
}
使用

{com}

算是最简单的办法了吧