jsx及其语法.md

  
  
  

  
  // 需要一个根容器
  

jsx 是通过js和xml实现的, 所以更偏向于js语言风格，有以下注意点

- jsx创建的组件，必须有且仅有一个父级
- 单标签必须闭合
- class要写成className
- label中for要写成htmlFor
空标签组件Fragement
dangerouslySetInnerHTML={{__html: item}}
{/* 注释 */}

jsx语法

jsx基本语法

ReactDOM

import React from 'react'
import ReactDOM from 'react-dom'

let content = 
jsx...

ReactDOM.render(jsx,document.getElementById('root'))

样式处理

// style样式要写成对象形式
let jsx = 


// 当是真实项目中还是使用className='jsx'

import './index.css'

数据逻辑处理

let name = 'Rosen'
let name = ['Rosen','Jack','xiaolong']

let flag = true
// 条件判断
let jsx = (
  

    {/*  条件判断 */}
    {
       flag?
I am {name}
:
 I am not {name}
    }
    {/* 数组循环 */}
    {
      names.map((name,index)=>
Hello I am {name}
)
    }
  
)