React基础知识（二）

1、函数组件基本用法（内嵌jsx语法）

（1）在JSX中可以通过 大括号语法{} 识别JavaScript中的表达式

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

其实判断很简单，就是 Js 片段执行的结果，如果是某个数据类型（字符串，布尔值，数组）就可以用，如果没有什么实质性的返回结果，就不能用。

（2）案例说明： {} 内js 代表某个具体的数据类型。

import React from 'react'
const msg = 'hello john'
function sayHello() {
  return "hello,john!"
}

export default function App() {
  return (
      <div>
        {'hello john!!!'}
        {msg}
        {sayHello()}
      </div>)
}

（3）案例说明：在JSX中可以使用原生js中的map方法实现列表渲染

const list = [
    {id:101, name:'john'},
    {id:102, name: 'lily'},
    {id:103, name: 'mike'}
]
export default function App() {

  return (
    <ul>
       {list.map(item=><li key={item.id}>{item.name}</li>)}
       
    </ul>)
}

(4) 三元表达式：其本质，{} 中js 运行完，有一个真正的数据类型。

const flag = true
const loading = false
export default function App() {
  return (
    <div>
      {flag && <span>this is span</span>}
      {loading ? <span>loading...</span> : <span>this is span</span>}
    </div>
  )
}

2、函数组件事件函数绑定

(1) 无参数传递 :   onClick={clickHandler} ,  {} 里面是一个函数名。

export default function App(){
  const clickHandler = ()=>{
  console.log('button按钮点击了')
  }
  return (
  <button onClick={clickHandler}>click me</button>
  )
 }

(2) 有参数传递 :    onClick={()=>clickHandler('john')} ，  {} 里面是函数中执行函数

export default function App(){
  function clickHandler(name){
  console.log('button按钮点击了', name)
  }
  return (
  <button onClick={()=>clickHandler('john')}>click me</button>
  )
 }

3、JSX 的样式处理

（1） style 用法

export default function App(){
  return (
    <h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
       JSX的样式处理
    </h1>
  )
 }

（2） class用法，需要使用className.   可以在某个外部css文件中定义title的样式。

export default function App() {
  return (
    <h1 className="title">
      JSX的样式处理
    </h1>
  )
}