脚本宝典收集整理的这篇文章主要介绍了JSX，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
JSX的基本使用
//1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; // 使用JSX创建react元素 const title = <h1>Hello JSX <span>这是span</span> </h1> // 渲染react元素 ReactDOM.render(title, document.getElementById('root'))
1. React元素的属性名使用驼峰命名法。
2.特殊属性名：class->className 、for->htmlFor、tabindex->tabIndex。
3.没有子节点的React元素可以用/>结束。
4.推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱。
//1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; // 使用JSX创建react元素 // const title = <h1 className='title'>Hello JSX <span>这是span</span> </h1> const title = ( <h1 className='title'> Hello JSX <span /> </h1> ) // 渲染react元素 ReactDOM.render(title, document.getElementById('root'))
JSX中使用JavaScript表达式
嵌入JS表达式
//1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; /* JSX中使用JavaScript表达式 */ const name = 'Jack' const age = 19 const title = ( <h1 className='title'> Hello JSX , {name}, 年龄：{age} </h1> ) // 渲染react元素 ReactDOM.render(title, document.getElementById('root'))
以上是脚本宝典为你收集整理的JSX全部内容，希望文章能够帮你解决JSX所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。