JSX 基础语法

1、JSX表达式

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

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' }
]
写法-：
<ul>
  {list.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>
写法二：
<ul>
  {list.map((item) => {
    return <li key={item.id}>{item.name}</li>
  }
  )}
</ul>
写法三：
<ul>
  {list.map((item) =>
    <li key={item.id}>{item.name}</li>
  )}
</ul>

3、JSX 条件渲染

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

4、JSX样式处理

const isActive = true
内联样式写法：
<p style={{ color: 'red' }}>内联样式写法</p>
动态添加className:
<p className={isActive ? 'active' : ''}>动态添加className</p>
动态添加多个className:
<p className={["text", isActive ? 'active' : ''].join(' ')}>动态添加多个className</p>