React03就是这样——JSX笔记

时间：2023-03-28 16:54:04 HTML

1JSX是一个表达式JSX是JavaScript的语法扩展，本质上是React.createElement()方法的语法糖。Babel会将JSX翻译成一个名为React.createElement()的函数调用，因此它被视为一个表达式。这意味着您可以在if语句和for循环块中使用JSX，将JSX分配给变量，将JSX作为参数传递，并从函数返回JSX：functiongetGreeting(user){if(user){return

Hello,{formatName(用户)}!

;}return

Hello,Stranger.

;}2JSX属性2.1驼峰式命名JSX是JS的扩展，所以使用驼峰式命名来定义属性的名称，而不是使用HTML的命名约定属性名例如：

在上面的JSX表达式中，class写成className2.2stylereceivesanobjectstylereceivesanobjectinsteadStrings如：letstyle={width:"100px",height:"100px",background:"red"};ReactDOM.render(

,document.querySelector("#root"));3JSX标签没有子元素。如果标签中没有内容，可以使用/>来关闭标签。例如：constelement=;4JSX防止注入攻击可以在JSX中安全地插入用户输入ReactDOM在渲染之前默认转义所有输入。它确保您没有明确自己编写的内容永远不会注入到您的应用程序中。所有内容在呈现之前都转换为字符串。这样可以有效防止XSS（cross-site-scripting，跨站脚本）攻击。5唯一父元素JSX表达式必须有父元素也就是说下面这样写会报错ReactDOM.render(,文档.querySelector("#root"));正确写法：ReactDOM.render(

,document.querySelector("#root"));如果我们不想在页面上渲染父元素，我们可以使用React.FragmentReact.Fragment组件让render()方法返回多个元素。render(){return(Sometext.

Aheading

);}也可以使用它的简写语法<>/>，参见Reactv16.2.0：片段支持得到改进。render(){return(<>Sometext.

Aheading

);}公众号【前端】问答