React style支持数组语法糖
React style支持数组语法糖探究
使用react-native,挖土填坑,下一脚还是继续踩坑。踩坑之余也发现了和react不同之处,或可称之为小亮点。话说三句不能离代码,请赏下文:
class demo extends Component {
render() {
const btnText = {
fontSize: 30,
color: '#757575'
}
const color = {
color: '#FE2740'
}
return (
<TouchableOpacity
style={styles.wordContainer}
activeOpacity={1}
onPress={()=>this.props.showWordDialog(index, item)}>
<Text style={
Object.assign({},
btnText,
item === selectedWord && color
)}
>
Button
</Text>
</TouchableOpacity>
)
}
}
在rn中样式通过style属性,其实就是一个样式对象,可以理解为内联样式。
常见的需求,静态一套样式,交互后需要修改样式或者新增样式。使用rn初期,便想到style支持对象,结合jsx特性,使用Object.assign进行浅拷贝,合成一个对象。
此种解决方案并无问题,使用良久,仍是不能习惯每次出现出现此类情况,需要格式代码洋洋洒洒好几行,懒惰使人进步,如何才能更少的代码,行数实现?
直到某次项目预研时,发现了rn的神奇写法(也许文档翻的还是不够烂,大佬勿喷),如下所示:
class demo extends Component {
render() {
const btnText = {
fontSize: 30,
color: '#757575'
}
const color = {
color: '#FE2740'
}
return (
<TouchableOpacity
style={styles.wordContainer}
activeOpacity={1}
onPress={()=>this.props.showWordDialog(index, item)}>
<Text style={[btnText, item === selectedWord && color}]}>
Button
</Text>
</TouchableOpacity>
)
}
}
当你需要设置多个样式时,rn style支持对象数组,你可以在里面增加判断,乃至多个样式对象,以最右侧值优先。如此写法又可以少敲多少代码!!!
尝到甜头之后则想react是否可以实现一波,源码扒一下,发现海量源码难以下咽。转念一想,先写成数组,看看报错会出在哪里?
立马去react中尝试一波,结果:
秉着不抛弃不放弃的精神,为了少写代码让我们低头看报错。
根据报错第一条信息,此时镜头给到了react-dom中4619行的setValueForStyles方法,瞅瞅这命名基本了解一切有没有,给styles设置值!!!上代码:
/**
* Sets the value for multiple styles on a node. If a value is specified as
* '' (empty string), the corresponding style property will be unset.
*
* @param {DOMElement} node
* @param {object} styles
*/
function setValueForStyles(node, styles) {
var style = node.style;
for (var styleName in styles) {
if (!styles.hasOwnProperty(styleName)) {
continue;
}
var isCustomProperty = styleName.indexOf('--') === 0;
{
if (!isCustomProperty) {
warnValidStyle$1(styleName, styles[styleName]);
}
}
var styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
if (styleName === 'float') {
styleName = 'cssFloat';
}
if (isCustomProperty) {
style.setProperty(styleName, styleValue);
} else {
style[styleName] = styleValue;
}
}
}
从头看这个函数,两个参数node, styles,且第一行取的就是node.style,来我们猜猜这是不是我们传进来的style。验证结果没错,style传入就是在这里。
这里将我们传入的style进行拆分并验证是否正确,而我们传入的数组通过dangerousStyleValue的检测返回对象,并不能最后用于样式展示,所以最终引起报错。
这里我们便理明白了react中style为什么不支持对象数组类型。接下来只需稍加修改便可达成我们最终目标:少写代码!!!
上代码!!!
function setValueForStyles(node, styles) {
var style = node.style;
if (Array.isArray(styles)) {
styles = Object.assign({}, ...styles)
}
.....
}
如上所示在拿到传入的style之后进行类型检测,如果为数组类型,就将数组内的对象通过Object.assign配合es6扩展运算符整合成一个styles对象进行后续处理。一次assign众生受益。少写代码目标达成!!!