【React】JSX基础知识

1. JSX的本质

1. JSX并不是标准的js语法，而是js语法扩展，浏览器本身无法识别，需要进行解析。解析工具：babel
   

2. JSX使用的4个高频场景

1. 使用引号传递字符串
2. 使用js变量
3. 函数调用和方法调用
4. 使用js对象

function App() {
  const jsVar = 1314
  function Func() {
    return '这是一个函数'
  }
  return (
    <div className="App">
      this is App
      <br/>
      {'使用引号传递字符串'}
      <br/>
      {jsVar}
      <br/>
      {Func()}
      <br/>
      {new Date().getTime()}
      <br/>
      <div style={{color: 'pink'}}>我变粉色啦</div>
    </div>
  );
}

export default App;

3. JSX实现列表渲染

**语法：**使用原生js中的map方法遍历渲染列表

function App() {
  const list = [
    { id: '001', content: '刘能' },
    { id: '002', content: '赵四' },
    { id: '003', content: '谢广坤' },
  ]
  return (
    <div className="App">
      乡村爱情中最搞笑的3个男人：
      <ul>
        {list.map((item) => {
          // 注意：需要加上一个唯一的key
          return <li key={item.id}>{item.content}</li>
        })}
      </ul>
    </div>
  );
}

export default App;

4. JSX的条件渲染

4.1 简单的

语法：可以使用逻辑与运算符&&、三元表达式?:实现

function App() {
  const isLoading = true
  const isLogin = false
  return (
    <div className="App">
      {isLoading && <div>加载中</div>}
      {isLogin ? <span>已登录</span> : <span>未登录</span> }
    </div>
  );
}

export default App;

4.2 复杂的

需求：根据文章状态（单图，三图和无图）适配3种情况
解决：自定义函数 + if语句

function App() {
  const articleType = 0
  function getArticleTem() {
    if (articleType === 0) {
      return <div>无图模式</div>
    } else if (articleType === 1) {
      return <div>单图模式</div>
    } else {
      <div>多图模式</div>
    }
  }
  return (
    <div className="App">
      {getArticleTem()}
    </div>
  );
}

export default App;

参考

黑马程序员react教程