React框架使用

一：使用Vite创建React项目

二：React中组件使用

import React, { Component, useState } from "react";

//使用class定义组件

export default class Modet extends Component<any,any> {
  // class组件中可以使用构造器
  constructor(props: any) {
    super(props);
    //定义状态
    this.state = { list: { id: 1, name: "小屋" }, list2: [] }
  }
  //(生命周期)创建时的函数,一般用于初始化数据
  componentDidMount(): void {

  }
  //(生命周期)数据修改时的函数,用于监听数据变化
  componentDidUpdate(): void {
    
  }
  //(生命周期)组件卸载时的函数,用于清除数据,如定时器之类的
  componentWillUnmount(): void {
    
  }
  render() {
    return (
      // 幽灵标签
      <>
      {/* bind传参 */}
      {/* <div onClick={this.方法名称.bind(this, 当前对象)}></div> */}

      {/* map使用 */}
      {
        this.state.list2.map((list:any,i:any)=>{
          <div key={i}>{list}</div>
        })
      }
      
      {/* React中for循环读取图片的方式 */}
        {
          /* {this.state.list2.forum_img=>图片集合逗号分隔后在循环 ，Vue中好像不可以这样写*/
          this.state.list2.forum_img.split(',').map((imageName: any, index: any) => (
            <img src={"./src/assets/img/" + imageName} alt="imageName" key={index} />
          ))
        }

      </>
    )
  }
}

//使用函数定义组件
export function Modet2() {
  // 函数组件中定义有状态数据
  let [user_pwd, setUserPwd] = useState();
  //修改数据方法
  function LoginSet(e: any) {
    // e是当前传过来的数据可以输出看看
    setUserPwd(e.target.value);
  }
  return(
    <>
    <div onClick={LoginSet}></div>
    </>
  )
}

三：在App.tsx中声明

import { Routes, BrowserRouter as Router, Route } from 'react-router-dom'
import Index from './component'
import { Login } from './component/login'
function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Login />}></Route>
        <Route path='/home' element={<Index />}></Route>
      </Routes>
    </Router>
  )
}

export default App

四：最后在main.ts中引用并且挂载App.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
//import App from '../src/component/text'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

五：路由使用

1、安装路由

npm i react-router-dom

2、引入路由

import {
  BrowserRouter as Router,--也可以直接使用BrowserRouter
  NavLink,--可以进行选中判断
  Route, Routes
} from 'react-router-dom'

代码：

App.tsx

import './App.css'
import {
  BrowserRouter as Router,
  NavLink,
  Route, Routes
} from 'react-router-dom'

import February from './component/february'
import March from './component/march'
import Times from './component/february/index2'
import Btn from './component/february/index'
import Input from './component/february/index3'
import Paging from './component/february/index4'
import Model from './component/march/march1'
import Change from './component/march/march2'
import { Sloting } from './component/march/march3'
import { Stateful } from './component/march/march4'
import { StatefulWork } from './component/march/march5'
import WordSix from './component/march/march6'
import Product from './component/march/march7'
import Button from './component/march/march8'
import Effect from './component/march/march9'
import Hooks from './component/march/march10'
import Context from './component/march/march11'
import VModel from './component/february/index5'
import { Reducer } from './component/march/march12'
import { Want } from './component/february/index6'

function App() {
  return (
    <Router>
      <NavLink className={({ isActive }) => isActive ? 'active' : ''} to="/february">2023-02-28</NavLink>
      <NavLink className={({ isActive }) => isActive ? 'active' : ''} to="/march">2023-03-01</NavLink>
      <Routes>
        <Route path='/' element=''></Route> 
        <Route path='february' element={<February />}>
          {/* index 默认显示 */}
          {/* <Route index element={<Times />} /> */}
          <Route path='times' element={<Times />} />
          <Route path='btn' element={<Btn />} />
          <Route path='input' element={<Input />} />
          <Route path='paging' element={<Paging />} />
          <Route path='vmodel' element={<VModel />} />
          <Route path='text' element={<Want />} />
        </Route>
        <Route path='march' element={<March />}>
          <Route path='model' element={<Model />}></Route>
          <Route path='change' element={<Change />}></Route>
          <Route path='slot' element={<Sloting />}></Route>
          <Route path='stateful' element={<Stateful />}></Route>
          <Route path='statefulWork' element={<StatefulWork />}></Route>
          <Route path='work' element={<WordSix />}></Route>
          <Route path='product' element={<Product />}></Route>
          <Route path='btn' element={<Button />}></Route>
          <Route path='effect' element={<Effect />}></Route>
          <Route path='hooks' element={<Hooks />}></Route>
          <Route path='context' element={<Context />}></Route>
          <Route path='reducer' element={<Reducer />}></Route>
        </Route>
        {/* Navigate重定向 */}
        {/* to相当于push，有历史记录，可以后退 */}
        {/* replace没有历史记录 */}
        {/* <Route path='/march' element={<Navigate to='/home' />}></Route> */}
      </Routes>
    </Router>
  )
}

export default App

子路由，March

import React from "react";
import { NavLink, Outlet } from "react-router-dom";
import '../css/index.css'
export default function March() {
    return (
        <>
            <h3>三月份作业</h3>
            <div className="div_title"> 
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"model"}>模态框</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"change"}>点击切换</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"slot"}>插槽</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"stateful"}>状态组件</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"statefulWork"}>状态组件作业</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"work"}>作业</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"product"}>父传子案例</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"btn"}>useState案例</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"effect"}>useEffect案例</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"hooks"}>Hooks案例</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"context"}>Context案例</NavLink>
            <NavLink className={({isActive})=> isActive?'title_active':''} to={"reducer"}>Reducer案例</NavLink>
            </div>
            <div>
                <Outlet />
            </div>
        </>
    )
}

子路由，February

import React from "react";
import { NavLink, Outlet } from "react-router-dom";
import '../css/index.css'
export default function February() {
    return (
        <>
            <h3>二月份作业</h3>
            <div className="div_title">
                <NavLink className={({isActive})=> isActive?'title_active':''} to={'times'}>动态显示当前时间</NavLink>
                <NavLink className={({isActive})=> isActive?'title_active':''} to={'btn'}>单击显示隐藏</NavLink>
                <NavLink className={({isActive})=> isActive?'title_active':''} to={'input'}>数据双向绑定</NavLink>
                <NavLink className={({isActive})=> isActive?'title_active':''} to={'paging'}>分页插件</NavLink>
                <NavLink className={({isActive})=> isActive?'title_active':''} to={'vmodel'}> v-model原生</NavLink>
                <NavLink className={({isActive})=> isActive?'title_active':''} to={'text'}> 深拷贝浅拷贝</NavLink>
            </div>
            <div>
                {/* 占位符，让当前组件显示在占位符的位置 */}
                <Outlet />
            </div>
        </>
    )
}