zoukankan      html  css  js  c++  java
  • React(三)JSX内置表达式

    (一)JSX是什么?

    React 使用 JSX 来替代常规的 JavaScript。

    JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

    我们不需要一定使用 JSX,但它有以下优点:

      • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
      • 它是类型安全的,在编译过程中就能发现错误。
      • 使用 JSX 编写模板更加简单快速。

    (二)使用 JSX

    (1)注释写法

    {/* 哈哈哈,你好 */}

        

      (2)添加自定义属性

          需要使用 data- 前缀。

    <p data-myattribute = "hhhh">这是一个很不错的 JavaScript 库!</p>

     

    (3)JSX 中不能使用 if else 语句,但是可以使用三元表达式

     表达式写在花括号 {} 中

    <p className="App-intro">{userName == '' ? '用户没有登录' : '用户名:' + userName}</p>

     

    (4)React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 

    var myStyle = {
        fontSize: 100,
        color: '#FF0000'
    };
    ReactDOM.render(
        <h1 style = {myStyle}>哈哈哈</h1>,
        document.getElementById('example')
    );

     

    (5)属性绑定

    <p><input type="button" value={userName} disabled={boolInput} /></p>

     

    (6)JSX 允许在模板中插入数组,数组会自动展开所有成员

    var arr = [
      <h1>菜鸟教程</h1>,
      <h2>学的不仅是技术,更是梦想!</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
      document.getElementById('example')
    );

     

    (7)html展示

      a:通过Unicode转码

      b:通过 dangerouslySetInnerHTML 设置 html

       (此方法可能会存在 XSS 攻击)

    <p dangerouslySetInnerHTML = {{__html:html}}></p>
  • 相关阅读:
    复制表结构及数据
    mysql 字段名是关键字 报错
    mysql 截取字符串
    《官方资料》 例如:string 函数 、分组函数
    mysql event 入门
    Spring国际化
    Python学习记录
    精选股文
    为VS定制一个自己的代码生成器
    房产常识
  • 原文地址:https://www.cnblogs.com/yulingjia/p/9719624.html
Copyright © 2011-2022 走看看