react中JSX的注意点有哪些

今天小编给大家分享一下react中JSX的注意点有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

1 JSX 是一个表达式

JSX 是 JavaScript 的语法扩展，本质上是 React.createElement()方法的语法糖。

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用，所以它被看作一个表达式。

这意味着你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

function getGreeting(user) {  if (user) {    return 
Hello, {formatName(user)}!
;  }  return 
Hello, Stranger.
;}

2 JSX 的属性

2.1 驼峰命名

JSX 是 JS 的扩展，所以使用驼峰命名来定义属性的名称，而不使用HTML 属性名称的命名约定

比如：

上述 JSX 表达式中 class 写作 className

2.2 style 接收一个对象

style 接收一个对象，而不是字符串

比如：

let style = {    width: "100px",    height: "100px",    background: "red"};ReactDOM.render(    
,    document.querySelector("#root"));

3 JSX 标签没有子元素

如果一个标签中没有内容，可以使用/>来闭合标签

比如：

const element = ;

4 JSX 防止注入攻击

可以安全地在 JSX 中插入用户输入内容

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS攻击。

5 唯一父元素

JSX 表达式必须有一个父元素

换句话说，下面的写法会报错

ReactDOM.render(    
    ,    document.querySelector("#root"));

正确的写法：

ReactDOM.render(    
        
            
,    document.querySelector("#root"));

如果我们不想让父元素被渲染在页面上，可以使用React.Fragment

React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。

render() {  return (          Some text.      
A heading
      );}

也可以使用其简写语法 <>，请参阅 React v16.2.0: Fragments 支持改进。

render() {  return (    <>      Some text.      
A heading
      );}

以上就是"react中JSX的注意点有哪些"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。