JSX遍历map

const list = [
  {
    name: 'react',
    id: 123,
  },
  {
    name: 'vue',
    id: 124,
  },
]

function App() {
    return (
        <div className="App">
            <ul>
                {list.map(item=> <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    )
}

export default App

• 在map 方法的回调函数中，返回想要重复渲染的内容(标签)
• item拿到的数组中的每一项然后通过再次使用{} 渲染具体的内容
• 需要一个独一无二的字符串或者number的key ，这个key不会出现在真实的dom中只是为了配合diff算法复用

JSX条件渲染

例： 控制文本展示

const  flag = true
function App() {
  return (
    <div className="App">
    {flag ? '真！' : '假！'}
            {falg ? <div> this is true </div> : 'loding...'}
    </div>
  )
}

jSX 样式处理

• 行内样式

function App () {
  return (
   <div className="App">
    <div style={{ color: 'blue' }}> 行内样式</div> 
  <div/>
 )
}

或者
const classType = { color: 'blue' };
function App () {
  return (
   <div className="App">
    <div style={classType}> 行内样式</div> 
  <div/>
 )
}

• 类名控制

app.css

 .test {
  color: blue;
  font-size:30px;
}

App.js

import './app.css'

function App () {
  return (
   <div className="App">
    <div className={test}> 行内样式</div> 
  <div/>
 )
}

• 动态类名控制

app.css

 dve {
  color: blue;
  font-size:30px;
}
prod {
  color: red;
  font-size:30px;
}

App.js

import './app.css'
const isDev = true 
function App () {
  return (
   <div className="App">
    <div className={ isDev ? 'dev' : 'prod'}> 行内样式</div> 
  <div/>
 )
}

注意事项

• JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代
• 所有标签必须形成闭合，成对闭合或者自闭合都可以
• JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
• JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现