react将html代码字符串转化为html_react 元素渲染

在Vue中template模板得到大量的使用，只要你会写HTML那么应该难不倒你这个小机灵鬼。而React则是使用了在函数中直接返回DOM。看起来非常的神奇，也导致了一些小伙伴在入门的时候会有点摸不着头脑，但是如果有一定基础，在Vue中写过了Render 函数的话，我想上手起来还是非常容易的。它看起来是下面这个样子的。其本质上就是一个createElement的过程。所以，将这种模板的渲染方式称之为JSX。

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>你好呀</h1>
      <p>今天又是充满希望的一天...</p>
    </div>
  );
}
export default App;

我们先来改造一下

从上面的 App() 函数，也可以说是一个类吧，里面返回了一段代码，就是直接的 html，js跟html混合着写就是我们所说的 jsx 代码

我们先从函数里面说起吧

我们可以创建一个 函数

function createElement() {
  let app = <App />
  let sm = <React.StrictMode>{app}</React.StrictMode>
  let root = document.getElementById('root')
  ReactDOM.render(sm, root)
}
createElement()

我们先来创建一个时钟函数

function clock() {
  let date = new Date()
  let app = <h1>这是一个时钟 {date}</h1> // vue {{}} react {}
  let root = document.getElementById('root')
  ReactDOM.render(app, root)
}

clock()
setInterval(clock, 1000)

注意上面的代码会报错

必须是字符串

function clock () {
  let date = new Date().toLocaleTimeString()
  let app = (<h1>这是一个时钟 {date}</h1>) // vue {{}} react {}
  let root = document.getElementById('root')
  ReactDOM.render(app, root)
}

clock()
setInterval(clock, 1000)

以组件的形式，以及传值的形式

function Clock(props) {
  return (
    <h1>
      这是一个时钟
      {props.date.toLocaleTimeString()}
    </h1>
  )
}

ReactDOM.render(
  <Clock date={new Date()} />,
  document.getElementById('root')
)