JSX 基础语法

1、JSX表达式

语法：{ JavaScript 表达式 } 
注意：语法是单大括号，不是双大括号
const name = '云墨卿'
const element = () => {
  return (
    
你好，{name}
  )
}

2、JSX列表渲染

JSX列表渲染使用是map
注意：遍历列表需要一个类型为number或者String类型的key,key保证唯一可提高页面性能,key只在内部使用不会出现在真是的dom当中
const list = [
  { id: 1, name: 'JavaScript' },
  { id: 2, name: 'Vue' },
  { id: 3, name: 'React' },
  { id: 4, name: 'Angular' }
]
写法-：

  {list.map((item) => (
    
{item.name}
  ))}

写法二：

  {list.map((item) => {
    return 
{item.name}
  }
  )}

写法三：

  {list.map((item) =>
    
{item.name}
  )}

3、JSX 条件渲染

const flag = true     
{/* 三元表达式 */}
{flag ? 
true显示
 : 
false显示
}
{/* 逻辑与运算 */}
{flag && 
true显示
}

4、JSX样式处理

const isActive = true
内联样式写法：
内联样式写法
动态添加className:
动态添加className
动态添加多个className:
动态添加多个className