JSX基础

1、识别JS表达式

在JSX中可以通过大括号语法{}识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等

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

代码测试

//项目的根组件
//App  ->index.js ->public/index.html(root)

const count = 100
function getName() {
  return "Lisa";
}
function App() {
  return (
    <div className="App">
      this is APP
      {/*使用引号传递字符串 */}
      {'this is message'}
      {/*识别js变量 */}
      {count}
      {/*函数调用 */}
      {getName()}
      {/*方法调用 */}
      {new Date().getDate()}
      {/*使用js对象 */}
      <div style={{ color: 'red' }}>this is a div</div>
    </div>
  );
}

export default App;

测试数据均可正常展示在页面上

注意：if语句、switch语句、变量声明3属于语句，不是表达式，不能出现在{}中

2、JSX中实现列表渲染

渲染列表
(1) map循环哪个结构 return结构
(2) 注意事项：加上一个独一无二的key 字符串或则number id
(3) key的作用：React框架内部使用，提升更新性能的

代码测试

const list = [
  { id: 1001, name: 'Vue' },
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' }
]
function App() {
  return (
    <div className="App">
      this is APP
      {/*渲染列表 */}
      {/*map循环哪个结构 return结构 */}
      {/*注意事项：加上一个独一无二的key 字符串或则number id */}
      {/*key的作用：React框架内部使用，提升更新性能的 */}
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

3、JSX实现条件渲染

实现demo，isLogin为true时显示Jack，为false时，显示请登录

语法：在React中，可以通过逻辑与运算符&&、三元表达式（?:）实现基础的条件渲染

代码测试

const isLogin = true
function App() {
  return (
    <div className="App">
      {/*逻辑与 && */}
      {isLogin && <span>this is span</span>}
      {/*三元运算 */}
      {isLogin ? <span>jack</span> : <span>loading...</span>}
    </div>
  );
}

isLogin=true测试结果如下

isLogin=false测试结果如下：

4、JSX复杂条件渲染

代码测试

const articleType = 1
//定义核心函数（根据文章类型返回不通的JSX模板）
function getArticleTem() {
  if (articleType === 0) {
    return <div>我是无图文章</div>
  } else if (articleType === 1) {
    return <div>我是单图模式</div>
  } else {
    return <div>我是三图模式</div>
  }
}

function App() {
  return (
    <div className="App">
      {/*通过调用函数渲染不同的模板 */}
      {getArticleTem()}
    </div>
  );
}