我在使用element-ui的table的控件的时候,对其中的template很好奇,使用slot-scope字段可以透传 当前row的相关信息,在react.js做列表控件的时候,就想着也实现一个类似的。
我没有仔细研究element-ui的代码是如何实现的,不过 javascript有一个Function函数,正好也在 做这个相关的功能,所以就用这个函数弄了一个类似的。
function rend_scope(t, key, slot) { if(!t.props['slot-scope']) { return (<Fragment key={key}>{React.createElement( t.type, t.props, )}</Fragment>); } let scope = t.props['slot-scope']; if(!scope.startsWith('{')) { let newprops = {...t.props}; newprops[scope] = slot; return (<Fragment key={index2}>{React.createElement( t.type, newprops, )}</Fragment>); } else { let result = null; let looseJsonParse = (obj)=>{ return Function('"use strict";return (' + obj + ')')()(slot); }; let s = `function(${scope}=slot){return ${scope};}`; result = looseJsonParse(s); return (<Fragment key={index2}>{React.createElement( t.type, {...t.props, ...result}, )}</Fragment>); } };
上面的代码首先判断是否存在slot-scope, 不存在的话,则动态创建。
如果存在的话,则判断是否是'{‘开头的,如果不是,则是将slot的作为props指定字段的值插入,然后动态创建。
如果是'{‘开头的话,表示要提取slot中的某部分字段的内容,这些字段作为props中指定的字段和值插入,然后动态创建。 这里使用了Function的功能,首先将slot-scope中的字符串拼接为一个简单的字段提取的函数, 上面变量s中字符串 函数的功能就是提取object中指定字段的功能,虽然通过分割slot-scope中的字符串,然后对object通过 数组方式读取也可以,我还是喜欢通过Function的功能,这样如果某个字段填写有问题的话,执行到会直接报错的,报错后 位置也好找。looseJsonParse里面的功能就是生成新的js的函数并且执行,因为动态生成函数后,执行的参数是slot, 而之前s的函数就变成了是返回slot中某些字段的内容并组成新的object了,最后将这部分和老的props合并并动态生成。
第2部分的判断如果用第3部分来做的话,则是将slot的整体与老的props合并,与我想要的结果并不同。