React中两种key属性传值的区别、错误方式及JSX解析器逻辑问询

两种写法的核心区别 #

• <Component key={1} />：大括号包裹的是JSX表达式，这里直接传递的是数字类型的1。
• <Component key=1 />：无大括号的写法属于字符串字面量，React会自动把1解析成字符串类型的"1"。

传递数字类型prop的错误方式 #

第二种写法<Component key=1 />是错误的——如果你的组件期望接收数字类型的prop（哪怕是key之外的自定义prop），这种写法实际传递的是字符串，完全不符合类型预期。

第一种写法的JSX解析逻辑 #

当使用{}包裹prop值时，JSX解析器会先执行括号内的JavaScript表达式，算出结果后再把这个结果作为prop传递给组件。就像这里的{1}，解析器直接求值为数字1，不会做额外的类型转换，原封不动把数字值传进去。如果括号里是变量、运算式甚至函数调用，也会先执行得到结果，再传递最终值。

内容的提问来源于stack exchange，提问作者Hakob Sargsyan