1. 直接渲染,()类似于模板字符串,包裹一个dom元素
ReactDOM.render(
(<div>
<h2>现在时间:{new Date().toLocaleTimeString()}</h2>
</div>),
document.getElementById('root')
)
  1. 通过函数渲染
function Clock(props){
return (
<div>
<h2>现在时间:{props.date}</h2>
</div>
)
}
ReactDOM.render(
<Clock date={new Date().toLocaleTimeString()}/>,
document.getElementById('root')
)
  1. 通过ES6新增class类,注意在class内部接收传参需使用 this.props. 代替函数方式中的 props
class Clock2 extends React.Component{
render(){
return (
<div>
<h2>假面骑士2:{this.props.date.toLocaleTimeString()}</h2>
</div>
)
}
}
function tick2(){
ReactDOM.render(
<Clock2 date={new Date()} />,
document.getElementById('root')
)
}
setInterval(tick2,1500)

react渲染数据3种方式的更多相关文章

  1. Json传递数据两种方式(json大全)

    1.Json传递数据两种方式(json大全)----------------------------字符串 var list1 = ["number","name&quo ...

  2. python 全栈开发,Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)

    昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...

  3. 简述--构建React项目的几种方式

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  4. 谈一谈创建React Component的几种方式

    当我们谈起React的时候,多半会将注意力集中在组件之上,思考如何将页面划分成一个个组件,以及如何编写可复用的组件.但对于接触React不久,还没有真正用它做一个完整项目的人来说,理解如何创建一个组件 ...

  5. Struts2-从值栈获取list集合数据(三种方式)

    创建User封装数据类 public class User { private String username; private String password; public String getP ...

  6. React 组件条件渲染的几种方式

    一.条件表达式渲染 (适用于两个组件二选一的渲染) render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> ...

  7. 12)django-ORM(单表返回数据3种方式)

    单表查询还回数据有3种形式,返回形式不一样,模板调用方式不同 1)返回Queryset里面内容为对象:Business.objects.all() 这里内容显示是对象 2)返回Queryset里面内容 ...

  8. React应用数据传递的方式

    1. props属性 典型的React应用,数据通过props按照自上而下(父->子)的顺序传递数据. 2. Context传值 1. 应用场景 对于一些应用中全局性的属性(如UI主题.语言.登 ...

  9. 十六、React 渲染数据注意事项、以及react-router4.x中使用js跳转路由(登录成功自动跳转首页)

    一.React加载数据流程回顾 先看上一节的产品详情代码:https://blog.csdn.net/u010132177/article/details/103184176 [Pcontent.js ...

随机推荐

  1. xss原理解析

    xss->跨站脚本攻击 xss是指攻击者在网页中嵌入客户端脚本.通常是指javascript编写的一个危险代码,当用户使用浏览器浏览网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的. ...

  2. 最全总结 | 聊聊 Python 数据处理全家桶(Mysql 篇)

    1. 前言 在爬虫.自动化.数据分析.软件测试.Web 等日常操作中,除 JSON.YAML.XML 外,还有一些数据经常会用到,比如:Mysql.Sqlite.Redis.MongoDB.Memch ...

  3. yum管理——linux字符界面安装图形化及两种界面的切换(3)

    1.查看yum软件包组 yum groups list 2.选择安装带 GUI 的服务器 yum groups install "带 GUI 的服务器" 3.字符界面切换为图形化界 ...

  4. redis部署问题

    在部署redis哨兵的时候,一开始一直都是失败:杀死master进程后,没有选出新的master 日志如下 9985:X 18 Feb 20:14:42.409 # +sdown master mym ...

  5. vue-router-next 通过hash模式访问页面不生效,直接刷新页面一直停留在根路由界面的解决办法

    vue3中,配合的vueRouter版本更改为vue-router-next通过 npm i vue-router@next 的方式进行引入添加,随后创建 router.js,在main.js里面引入 ...

  6. Spring系列之新注解配置+Spring集成junit+注解注入

    Spring系列之注解配置 Spring是轻代码而重配置的框架,配置比较繁重,影响开发效率,所以注解开发是一种趋势,注解代替xml配置文件可以简化配置,提高开发效率 你本来要写一段很长的代码来构造一个 ...

  7. burp suite 之 Scanner(漏洞扫描)

    Scanner选项:是一个进行自动发现 web 应用程序的安全漏洞的工具. 将抓取的包 通过选项卡发送至 Scanner下的Scan queue 首先来介绍 Scanner 下的 lssue acti ...

  8. 微服务分布式电商项目学习笔记(三)---- docker介绍安装以及使用docker安装软件(2020/7/10)

    其实在介绍docker的使用和安装之前应该还要介绍虚拟机的安装与配置,以及虚拟网络的配置,但是我使用的是vmware,而视频课使用的是vagrant,这一块我简看的,因此没有过多的介绍,至于vmwar ...

  9. 从四个问题透析Linux下C++编译&链接

    摘要:编译&链接对C&C++程序员既熟悉又陌生,熟悉在于每份代码都要经历编译&链接过程,陌生在于大部分人并不会刻意关注编译&链接的原理.本文通过开发过程中碰到的四个典型 ...

  10. 单元测试框架怎么搭?快来看看新版Junit5的这些神奇之处吧!

    为什么使用JUnit5 JUnit4被广泛使用,但是许多场景下使用起来语法较为繁琐,JUnit5中支持lambda表达式,语法简单且代码不冗余. JUnit5易扩展,包容性强,可以接入其他的测试引擎. ...