不可行,下面的内容不要参考了
场景
现在有一个json型的数据,比如导航栏的数据,以树状的形式分布,我们需要拿到数据后动态的生成DOM
思路
很容易想到递归的方式去渲染,但是ES6的奇葩语法让我十分头疼,我想一次生成标签并返回
第一次尝试
用js语句做判断条件来动态生成标签
代码大概是这样的
let Options = data.map(function(data){
var temp = data.fullpath.substring(0,data.fullpath.length - data.name.length);
if ((data.isServiceUnit == 0) && fun1(temp,path))
count++;
path=temp;
result = result + "<SubMenu key=\""+data.id+"\" title=<span><Icon type=\"mail\" /><span>"+data.name+"</span></span>>\n"
// return (
// <SubMenu key={data.id} title={<span><Icon type="mail" /><span>{data.name}</span></span>}>
// );
if (data.isServiceUnit == 0) {
path=temp;
for(var i = 0;i<count;i++)
result = result + "</SubMenu>\n";
// data_temp.map(function(data2){
// return (</SubMenu>)
// })
count = 0;
}
if (data.isServiceUnit == 1){
result = result + "<Menu.Item key=\""+data.id+"\">"+data.name+"</Menu.Item>"
// return (
// <Menu.Item key={data.id}>{data.name}</Menu.Item>
// )
}
else return;
}
经实践这样是行不通的,因为是嵌套标签,有时候一次return 返回的标签并不完整,所以编译器会报错,我自己想想这样的实现方式都奇葩,放弃。
第二次尝试
React 的官方文档中有一个这样的方法
dangerouslySetInnerHTML
经过我的实验,此方法可行
解决方法
先把json数据拿过来生成嵌套好的字符串,再用上面的方法一次性导入,就避开了上面的大坑。
这应该不是最好的解决方案,但至少解决了我的问题,在此分享一下,有更好的解决方法欢迎提出!