React style支持数组语法糖探究

?使用react-native，挖土填坑，下一脚还是继续踩坑。踩坑之余也发现了和react不同之处，或可称之为小亮点。话说三句不能离代码，请赏下文：

class demo extends Component {
render() {
const btnText = {
fontSize: 30,
color: ‘#757575‘
}
const color = {
color: ‘#FE2740‘
}
return (
language-jsx">class demo extends Component {
render() {
const btnText = {
fontSize: 30,
color: ‘#757575‘
}
const color = {
color: ‘#FE2740‘
}
return (
技术分享图片" src="https://img6.php1.cn/3cdc5/9c03/3b4/d2eec27d80c8e129.jpeg" alt="image-20200813212329670" loading="lazy">

秉着不抛弃不放弃的精神，为了少写代码让我们低头看报错。

根据报错第一条信息，此时镜头给到了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众生受益。少写代码目标达成！！！