react中JSX的注意点详解

目录
  • 1JSX是一个表达式
  • 2JSX的属性
    • 2.1驼峰命名
    • 2.2style接收一个对象
  • 3JSX标签没有子元素
  • 4JSX防止注入攻击
  • 5唯一父元素
  • 总结

1 JSX 是一个表达式

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

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

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

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

2 JSX 的属性

2.1 驼峰命名

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

比如：

<div className="container"></div>

上述 JSX 表达式中 class 写作 className

2.2 style 接收一个对象

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

比如：

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

3 JSX 标签没有子元素

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

比如：

const element = <img src={user.avatarUrl} />;

4 JSX 防止注入攻击

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

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

5 唯一父元素

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

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

ReactDOM.render(
    <div className="box" style={style} />
    <input type="text" />,
    document.querySelector("#root")
);

正确的写法：

ReactDOM.render(
    <div>
        <div className="box" style={style} />
        <input type="text" />
    </div>,
    document.querySelector("#root")
);

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

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

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

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

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • React学习之JSX与react事件实例分析

    本文实例讲述了React学习之JSX与react事件.分享给大家供大家参考,具体如下: 1.JSX 1.1.表达式 在React中使用JSX来描述HTML页面,而且可以与js混合使用,使用JavaScript表达式时要将表达式包含在大括号里 const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( //将JSX语句保存在变量中 <h1> Hello, {formatName(user)}! {/* {}

  • JavaScript的React框架中的JSX语法学习入门教程

    什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和组件之间的关系看上去更加清晰. var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent som

  • React-vscode使用jsx语法的问题及解决方法

    React-vscode使用jsx语法的问题及解决方法

    问题描述 安装了插件ES7 React/Redux/GraphQL/React-Native snippets还是不能完全支持 所以我参考了博客,得出了我的解法 解决方法 打开设置 搜索includeLanguages 搜索的结果如下(这个wxml是我之前设置的微信wxml作为html支持emmet语法) 点击添加项javascript:javascriptreact 填写这个项,就可以了,你会发现 他在上面写出来了"javascript":"javascriptreact&

  • react中JSX的注意点详解

    目录 1JSX是一个表达式 2JSX的属性 2.1驼峰命名 2.2style接收一个对象 3JSX标签没有子元素 4JSX防止注入攻击 5唯一父元素 总结 1 JSX 是一个表达式 JSX 是 JavaScript 的语法扩展,本质上是 React.createElement()方法的语法糖. Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用,所以它被看作一个表达式. 这意味着你可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋

  • react中的ajax封装实例详解

    react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlenc

  • React 中 setState 的异步操作案例详解

    React 中 setState 的异步操作案例详解

    目录 前言 React 中的 setState 为什么需要异步操作? 什么时候setState会进行同步操作? 前言 在使用state的时候, 如果我们企图直接修改state中的某一个值之后直接打印(使用)他,就会发现,他其实并没有改变. 就像下面的例子,企图通过点击事件之后就使用修改之后的state的值,但是会发state中的并没有被立即修改,还是原先的值,我们都知道那是因为 setState就相当于是一个异步操作,不能立即被修改. import React, { Component } fr

  • React中useLayoutEffect钩子使用场景详解

    目录 简介 useEffect钩子的概述 钩子流程 useLayoutEffect钩子的概述 钩子流程 什么时候使用useLayoutEffect钩子? 总结 简介 不久前,React对其功能组件进行了一次重大更新(在2019年3月的16.8版本中),终于为这些组件提供了一种变得有状态的方法. 钩子的加入不仅意味着功能组件将能够提供自己的状态,而且还能通过引入useEffect钩子来管理自己的生命周期事件. 此外,这次更新还引入了一个全新的useLayoutEffect钩子,根据React文档,

  • React中使用Vditor自定义图片详解

    安装 npm install vditor -s 引用 导入依赖包 import Vditor from "vditor"; 导入样式 import "vditor/src/assets/scss/index.scss"; 使用示例 export default class Vditor extends Component { constructor(props) { super(props); this.state = { editValue: "&qu

  • React中如何引入Angular组件详解

    前言 为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能.而为了使用它,我得再次使用一次 customEvent ,而在这个微前端架构的系统中,其事件通讯机制已经相当的复杂.在这部分的代码进一步恶化之前,我得尝试有没有别的方式.于是,我想到了之前在其它组件中使用的 Web Components 技术,而 Angular 6 正好可以支持. 下面话不多说了,来一起看看详细的介绍吧 HTML 中引入 Web Components 我所需要做的事情也相当的简单,只需要将

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

  • sass在react中的基本使用(实例详解)

    目录 1. 安装sass 2. 编写App.tsx中的基本DOM 3. sass变量 4. sass中的选择器嵌套和属性嵌套 5. sass中的@import和Partials 6. Sass中的 @mixin 与 @include 7.sass中的继承 @extend 8. 源代码 1. 安装sass 较新的版本不需要配置sass-loader等一系列插件,安装即用. npm install --save-dev sass 2. 编写App.tsx中的基本DOM 更改app.css为app.s

  • 利用CDN加速react webpack打包后的文件详解

    此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置): publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/" 打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -

  • React全家桶环境搭建过程详解

    本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader 新建tsconfig.json { "compilerOptions": { "outDir"

随机推荐