<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>hell world</title>

  <style>

    .red {

      color: red

    }

  </style>

</head>

<body>

  <!-- 用于内容显示容器 挂载点 -->

  <div id="app"></div>

  <!-- react核心类库 -->

  <script src="./js/react.development.js"></script>

  <!-- dom操作 -->

  <script src="./js/react-dom.development.js"></script>

  <!-- 解析jsx语法的兼容库 -->

  <script src="./js/babel.min.js"></script>

  <script type="text/babel">

    const app = document.querySelector('#app')

    const title = '我是一个按钮'

    const src = 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg'

    const html = '<a href="http://www.baidu.com">百度一下</a>'

    // jsx => js扩展

    // 如果是单行则不需要小括号，多行需要使用小括号括起来

    const vnode = (<div>

      {

        // 动态属性，直接写{} 不要写引号引起来

      }

      <button title={title}>{title}</button>

      <hr />

      <img src={src} />

      <hr />

      {

        // js中class是es6中的定义类的关键词  jsx提供用于class兼容解决方案 className

      }

      <div className="red">我是一个需要样式的标签</div>

      <div>

        {

          // js是 for是一个循环的关键词 jsx提供兼容方案 htmlFor

        }

        <label htmlFor="username">账号</label>

        <input type="text" id="username" />

      </div>

      {

        // 样式  style不能写成字符串，只能对象的方式来写

      }

      <div style={{ color: 'red', fontSize: '20px' }}>style样式</div>

      {

        // 解析html元素

        // 默认是对html内容进行转义，如果想让html不转义就需要使用jsx提供属性  jsx语法不推荐你在jsx解析html内容

      }

      <div>{html}</div>

      {

        // 解析html

      }

      <div dangerouslySetInnerHTML={ { __html: html } }></div>

    </div>)

    // 把虚拟dom转为真实的dom并挂载到页面中

    ReactDOM.render(vnode, app)

  </script>

</body>

</html>

react 属性绑定动态值的更多相关文章

  1. react属性绑定

    1.属性值绑定state里的数据,不用引号 class App extends Component { constructor(props){ super(props); this.state = { ...

  2. Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

    一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="t ...

  3. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

  4. Razor语法中绑定一个值给checkbox

    在ASP.NET MVC开发中,需要绑定一个值给checkbox标签,如下面写法,它们运行时是没有问题,照样能跑. 看看上面的语法,在绑定时,它却出现绿浪线.提不绑定的值is not a valid ...

  5. VB默认属性、动态数组、Range对象的默认属性的一点不成熟的想法

    1.默认属性 VB6.0有默认属性的特性.当没有给对象指定具体的属性时,"默认属性"是VB6.0将使用的属性.在某些情形下,省略常用属性名,使代码更为精简. 因为CommandBu ...

  6. RadGrid使用技巧：从RadGrid获取绑定的值

    本文主要介绍从RadGrid获取绑定的值,仅适用于Telerik RadControls for asp.net ajax. 获取方式 RadGrid把绑定的值存储在VIewState中,即使View ...

  7. 【WPF】如何把一个枚举属性绑定到多个RadioButton

    一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ...

  8. react 属性与状态 学习笔记

    知识点:1.react 属性的调用 this.props.被调用的属性名 设置属性的常用方法:var props = { one: '123', two: 321}调用这个属性:<HelloWo ...

  9. 控制文本和外观------Attr Binding(attr属性绑定)

    Attr Binding(attr属性绑定) 目的 attr 绑定提供了一种方式可以设置DOM元素的任何属性值.你可以设置img的src属性,连接的href属性.使用绑定,当模型属性改变的时候,它会自 ...

  10. 3.Knockout.Js（属性绑定）

    前言 让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值. 简单的绑定 首先还是先定义一个ViewModel var AppViewModel = { shou ...

随机推荐

  1. K8s场景下Logtail组件可观测方案升级-Logtail事件监控发布

    简介: SLS针对Logtail本身以及Logtail的管控组件alibaba-log-controller,采用K8s事件的方式,将处理流程中的关键事件透出,从而让用户能够更清楚的感知其中发生的异常 ...

  2. 消息队列 RabbitMQ 遇上可观测--业务链路可视化

    简介: 本篇文章主要介绍阿里云消息队列 RabbitMQ 版的可观测功能.RabbitMQ 的可观测能力相对开源有了全面的加强,为业务链路保驾护航. 作者:文婷.不周 本篇文章主要介绍阿里云消息队列 ...

  3. 我在阿里巴巴做 Serverless 云研发平台

    简介: Serverless 云研发平台经过这半年多的蜕变,已经从简单的解决工程链路的平台演进成一个面向研发.上线.运维的全生命周期研发平台,后续要解决的命题会集中在用户低门槛上. 作者 | 林昱(苏 ...

  4. Databricks 企业版 Spark&Delta Lake 引擎助力 Lakehouse 高效访问

    ​简介:本文介绍了Databricks企业版Delta Lake的性能优势,借助这些特性能够大幅提升Spark SQL的查询性能,加快Delta表的查询速度. 作者: 李锦桂(锦犀) 阿里云开源大数据 ...

  5. [Roblox] 从障碍跑入门构建基础平台游戏_罗布乐思

      对于障碍跑来说,底板部分是可以不需要的 这样掉下障碍物就结束游戏,Baseplate 可以在右侧资源管理器 选中后Delete. SpawnLocation 标记玩家在游戏开始时或重新开始后在世界 ...

  6. [PHP] 如何让 php-fpm 的循环 echo 实时输出到浏览器

      PHP 里开启实时输出方法是 ob_implicit_flush() , 但它大部分情况下都不管用, 因为 php.ini 配置里 output_buffering 输出缓冲大部分是 On 开启的 ...

  7. [ML] Google colab GPU 免费使用, 可挂载 Google drive

    colab 的文本行就相当于命令行,命令统一都在前面加 ! . 开启 GPU 加速,通过菜单栏的 "修改" 菜单,选择 "笔记本设置". 挂载 Google d ...

  8. WPF 优化 EnsureHandle 启动性能

    本文将记录一个在 WPF 应用程序启动过程中的性能优化点.如果一个窗口需要设置 WindowStyle 属性,那么在窗口 EnsureHandle 之前,设置 WindowStyle 属性将会比在 E ...

  9. 读 MAUI 源代码 理解可绑定对象和可绑定属性的存储机制

    和 UWP 与 WPF 不同的是在 MAUI 里面,使用可绑定对象 BindableObject 替换了依赖对象的概念,我阅读了 MAUI 的源代码发现其实只是命名变更了,里面的机制和设计思想都是差不 ...

  10. dotnet 读 WPF 源代码笔记 为什么加上 BooleanBoxes 类

    在 WPF 框架,为什么需要定义一个 BooleanBoxes 类.为什么在 D3DImage 的 Callback 方法里面,传入的是 object 对象,却能被转换为布尔.本文将告诉大家为什么需要 ...