定义虚拟 DOM

  1. const VDOM = (
  2.   <h1 id="vdom">定义虚拟 DOM</h1>
  3. )

注意： 不要使用引号 标签必须闭合 必须有一个根标签 标签小写开头，则转为 html 中同名元素，无则报错 标签大写开头，则转为 React 中对应的组件，无则报错

动态ID数据和虚拟 DOM

  1. let dataElementId = 'vdom'
  2. let dataContent = '动态ID数据和虚拟 DOM'
  4. const VDOM = (
  5.   <h1 id="{dataElementId}">{dataContent}</h1>
  6. )

注意： 标签中混入 JavaScript 表达式时要用 {} 样式的类名不要使用 class ，改为 className

类样式和虚拟 DOM

  1. let dataElementId = 'vdom'
  2. let dataContent = '类样式和虚拟 DOM'
  4. const VDOM = (
  5.   <h1 className="vdom" id="{dataElementId}">{dataContent}</h1>
  6. )

注意： 样式的类名不要使用 class ，改为 className

内联样式和虚拟 DOM

  1. const VDOM = (
  2.   <h1 style={{color: 'red',fontSize: '40px'}}>内联样式和虚拟 DOM</h1>
  3. )

注意： 内联样式要使用 style={{key:value}}格式去写