R_基础_1

1 JSX

  1 React 项目中使用的是 JSX 语法   // 可看做是 JS 的语法糖, JSX 语法写在页面中比较简洁明了

  2 xx.jsx 文件和 .js 文件   // 只是看上去比较有语义化

  3 React 元素的属性名使用驼峰命名法

  4 特殊属性名: class -> className / for -> htmlFor / tabindex -> tabIndex

  5 JSX 中推介使用小括号包裹元素标签   // const hh = (<h3> 呵呵 </h3>)

  6 <he> 名字 {this.name} </h3>   // 变量写在 {} 中

2 条件渲染

--------------------------------------- if 判断 ------------------------------------------------

state = {bol: true}

hh = () => {
  if (bol) {return <span> 加载中.. </span>}
  return <span> 加载完成 </span>
}

<i> {this.hh()} </i>


---------------------------------------- 三元表达式 -----------------------------------------------

state = {bol: true}

hh = () => bol ? (<span> 加载中.. </span>) : (<span> 加载完成 </span>)

<i> {this.hh()} </i>


------------------------------------------ 运算符 && ---------------------------------------------

state = {bol: true}

hh = () => bol && (<span> 加载中.. </span>)

<div> {this.hh()} </div>


------------------------------- 多个视图只渲染其中的某一个 ------------------------------------------------

hh = () => {
  let idx = 2
  let res = null
  
  switch (idx) {
    case 1:
      res = <span>  小乌龟 </span>
      break
    case 2:
      res = <span>  小喵喵 </span>
      break
    case 3:
      res = <span>  小憨狗 </span>
      break
    default
  }
  
    return res
  }

<i> {hh()} </i>

3 列表渲染

const List = [
  {id:1, name: 'zhang'},
  {id:2, name: 'xiao'},
  {id:3, name: 'cuo'}
]

hh = List => List.map(v => <li key={v.id}>{v.name}</li>)

<ul> {hh()} </ul>

// 渲染数组用 map() 方法
// 避免使用索引号作为列表的 key 值, 因为索引号不是与元素固定绑定的, 不应该作为元素的标识

4 样式

### 行内样式

    <h2 style={{color:'red', fontSize: 35px}}> 孤独 <h2/>



### className -- 1

    1 <h2 calssName={`box1 box2`}> 一个人 </h2>   // 多个类名拼接 --> 注意空格

	2 



### className -- 2

.title { text-align: center; }   // index.css --> 定义样式

import './index.css'   // index.jsx --> 引入

<h3 className="title"> 666 </h3>   // index.jsx --> 使用