zoukankan      html  css  js  c++  java
  • React JSX语法

    const element = <h1>Hello, world!</h1>;
    
    它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
    
    JSX 是在 JavaScript 内部实现的。
    
    我们知道元素是构成 React 应用的最小单位,JSX 就是用来声明 React 当中的元素。
    
    与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
    
    要将 React 元素渲染到根 DOM 节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上:
    
    在React中使用jsx语法进行渲染,
    
    使用jsx来代替常规的JavaScript,
    
    eg:
    //样式
    var myStyle = {
        fontSize: 100,
        color: '#FF0000'
    };
    //HTML也可以这样写
    var arr = [
      <h1>菜鸟教程</h1>,
      <h2>学的不仅是技术,更是梦想!</h2>,
    ];
    ReactDOM.render(
        <div>
            <span>{1+1}</span>
            <div>{arr}</div>
            {/*注释需要写在花括号内*/}
            <h1 style={myStyle}> i==1 ? 'heson' : 'haizhen' </h1>
        <div/>
        ,
        document.getElementById('example')
    )
    
  • 相关阅读:
    mysql 常用命令
    mysql 存储过程知识点
    position 属性值:relative 与 absolute 区别
    spring 注解列表
    spring aop 术语
    socket、WebSocket
    spring mvc 基础
    requestAnimationFrame 提高动画性能的原因
    markdown 知识点
    SpringMVC Controller 介绍及常用注解
  • 原文地址:https://www.cnblogs.com/heson/p/12009634.html
Copyright © 2011-2022 走看看