二、【react】基础语法

我们编写的代码主要写在tsx中，一个tsx一般就是一个组件

本文提供一些基础语句放在app.tsx中即可成功运行

为啥用这个东西呢？
为了在html的结构中写js

如何使用？

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

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

1、表达式

const count = 100;

function getName(){
  return "my name is john"
}

function App() {
  return (
    <div className="App">
      this is my react app
      {/*使用引号传递字符串*/}
      {'this is string'}
      {/*使用javaScript变量*/}
      {count}
      {/*函数调用和方法调用*/}
      {getName()}
      {new Date().toLocaleDateString()}
      {/*使用javaScript对象*/}
      <div style={{color: "red"}}>this is red</div>
    </div>
  );
}
export default App;

2、循环结构

list.map(item=>html结构)
key={item.id} 是react用来提升更新性能的，必须是独一无二的

const list = [
  {id: 1, name: "apple"},
  {id: 2, name: "banana"},
  {id: 3, name: "orange"}
]

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

export default App;

3、基础条件渲染

&& 逻辑与
三元表达式

const showFlag = false

function App() {
  return (
    <div className="App">
      {showFlag && <h1>Hello World</h1>}
      {showFlag ? <h1>Hello World</h1>:<span>hide</span>}
    </div>
  );
}
export default App;

4、复杂条件渲染

复杂条件渲染可以写个函数

const showType = 2; // 0: 无图模式，1: 单图模式，2: 双图模式
function getShowDiv() {
  if(showType === 0){
    return <h1>无图模式</h1>;
  } else if(showType === 1){
    return <h1>单图模式</h1>;
  } else if(showType === 2){ 
    return <h1>双图模式</h1>;
  } else {
    return <h1>未知模式</h1>;
  }
}

function App() {
  return (
    <div className="App">
      {getShowDiv()}
    </div>
  );
}

export default App;

5、事件绑定

点击事件
注意这个handleClick 写在了app里面
e 是事件对象

function App() {
  const handleClick = (e) => {
    console.log('你点击了按钮',e);
  }
  return (
    <div className="App">
      <button onClick={handleClick}>点击我一下</button>
    </div>
  );
}
export default App;

传递自定义参数

function App() {
  const handleClick = (name,e) => {
    console.log('my name is '+ name);
  }
  
  return (
    <div className="App">
      <button onClick={()=>handleClick('nas')}>点击我一下</button>
    </div>
  );
}
export default App;

我全都要 e 和 自定义参数

function App() {
  const handleClick = (name,e) => {
    console.log('my name is '+ name);
    console.log('event object is ',e);
  }

  return (
    <div className="App">
      <button onClick={(e)=>handleClick('nas',e)}>点击我一下</button>
    </div>
  );
}
export default App;