我有一个React组件,在该组件的render方法中,我有如下内容:
render(){
返回(
<;div>;
<;div>;
//为简洁起见,请删除
<;/div>;
{开关(…){}
<;div>;
//为简洁起见,请删除
<;/div>;
<;/div>;
);
}
现在关键是我有两个div元素,一个在顶部,一个在底部,它们是固定的。在中间,我希望有一个开关语句,并且根据我的状态中的值,我想要呈现一个不同的组件。因此,基本上,我希望两个代码> div 元素总是固定的,只是在中间,每次呈现不同的组件。我用它来实现一个多步骤付款程序)。尽管如此,由于代码当前不起作用,因为它给了我一个错误,说明开关是意外的。有什么想法可以实现我想要的吗
试试这个,这也是一种更干净的方法:在函数中从渲染中取出开关,然后通过所需的参数调用它。例如:
渲染开关(参数){
开关(参数){
案例“foo”:
返回“bar”;
违约:
返回“foo”;
}
}
render(){
返回(
<;div>;
<;div>;
//为简洁起见,请删除
<;/div>;
{this.renderSwitch(param)}
<;div>;
//为简洁起见,请删除
<;/div>;
<;/div>;
);
}