Taro2中object的value为dom时的异常情况

433 阅读2分钟

先说明下object的基本声明

const obj = { key: 'value' } || { 'key': 'value' };
// 取值
obj.key || obj['key']
// 'value'

【1】在当key的值符合标识符的情形时(字母、$、_,开头),这个key加不加上引号都是相等的,相等的值会被覆盖

const obj = {key: 'value', 'key': 'valule}
// {key: 'value'}

【2】在当key的值为一般的数字时,这个key加不加上引号也是相等的,相等的值会被覆盖

const obj = {1: 'value', '1': 'value'}
// {1: 'value'} // 开发者工具打印时key会去掉引号

【3】在当key的值为科学计数法的数字时,就有不同的情况了

const obj = {1e2: 'value', 100: 'value'}
// {100: 'value'}

因为key为数字类型时会用toString(),将其转化为String类型

1e2.toString() // 100

参考【2】的情况,两个key相同,被覆盖掉了。这时候如果给1e2加上引号,那么一个是100数字,一个是'1e2'字符串,两个key就不相等了

const obj = {'1e2': 'value'. 100: 'value'}
// {100: 'value', 1e2: 'value'}

【4】在当key的值为非标识符时,就必须要使用引号了,不然这个object声明就是报错的

const obj = {1-1: 'value', -27test: 'value'}
// Uncaught SyntaxError: Unexpected token '-'
const obj = {'1-1': 'value', '-27test': 'value'}
// {1-1: 'value', -27test: 'value'}

接下来说明Taro2中object的异常表现

声明一个非dom类型的object

const object = {key: 'value'}

taro2表现是正常的 当声明一个dom类型的object时

const object = {key: <View>我是dom</View>}

这是key没有加上引号,Taro2编译会出现异常,导致页面无法渲染,控制台会报提示'请给组件提供一个 defaultProps 以提高初次渲染性能!' 当给key加上引号,Taro2的编译就正常了,页面能够正常渲染

const object = {'key': <View>我是dom</View>}

所以在使用Taro2是,如果要使用object处理dom逻辑时,要给key加上引号 在Taro3中,无论是class类还是hooks,都没有该问题,正常声明object即可