Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

react渲染数据3种方式

计划完成一个React+Koa的全栈项目 项目地址
React文档入门

后2种渲染方式渲染一个组件,需要进一步放在render中

  1. 直接渲染,()类似于模板字符串,包裹一个dom元素
import ReactDOM from 'react-dom'   // npm i react-dom

// 此方式是在某基础组件基础上直接渲染,不能产生一个模块被引入->再放置再另一模块render函数中
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
import React from 'react'
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)
posted @   365/24/60  阅读(2112)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
点击右上角即可分享
微信分享提示