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

Question

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

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

Answer 1

最简单最直接的办法，利用一个条件来决定是否渲染组件,通过更改这个条件来实现切换局部组件的渲染与取消。伪代码：let&nbsp;com;if(true){ &nbsp;&nbsp;&nbsp;com=<Component/>}else{ &nbsp;&nbsp;&nbsp;com=null} 使用 {com}算是最简单的办法了吧

Answer 2

谢邀~首先我没太读懂你是想做什么, 我的理解是当你点击li, 切换下方的code-loaderBox去显示不同的组件?其次, 看到你的代码我提几个意见, 仅供参考.不使用jquery, 用state去保存状态li可以使用一个数组对象去封装好参数, 这样传参也比较方便, render之前可以动态生成一个listconst&nbsp;list; list&nbsp;=&nbsp;数组.map(function(o,&nbsp;i,&nbsp;objs){&nbsp; &nbsp;&nbsp;&nbsp;return&nbsp;<li&nbsp;onclick={this.onClick(i))}&nbsp;key={i}&nbsp;>{o.name}</li> &nbsp;&nbsp;});return中<ul> &nbsp;&nbsp;&nbsp;&nbsp;{list} </ul>onClick中&nbsp;&nbsp;&nbsp;&nbsp;onClick(i){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//传入的参数,&nbsp;可以为任意含义的参数,&nbsp;但必须唯一 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//根据不同情况去 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;status&nbsp;=&nbsp;某种情况;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({status:&nbsp;status}); &nbsp;&nbsp;&nbsp;&nbsp;}code-loaderBox中动态显示某些组件<div> &nbsp;&nbsp;&nbsp;this.state.status&nbsp;==&nbsp;某种情况&nbsp;?&nbsp;<某种情况下的组件&nbsp;/>&nbsp;:&nbsp;null &nbsp;&nbsp;&nbsp;this.state.status&nbsp;==&nbsp;某种情况&nbsp;?&nbsp;<某种情况下的组件&nbsp;/>&nbsp;:&nbsp;null &nbsp;&nbsp;&nbsp;this.state.status&nbsp;==&nbsp;某种情况&nbsp;?&nbsp;<某种情况下的组件&nbsp;/>&nbsp;:&nbsp;null &nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;//多个的话也可以写一个switch </div>