TS在React中的具体使用_react 插槽 ts-优快云博客

本文链接：https://blog.youkuaiyun.com/NUAN__YANG/article/details/130825635

1，结合useState使用
主要内容为介绍了ts结合useState的使用方法

const [perm, setPerm] = useState< boolean >(true)

import React, { useState } from "react"
import { NavLink } from "react-router-dom"
import styles from './Nav.scss'

interface Props { }

const Nav: React.FC = (props: Props) => {

  const [perm, setPerm] = useState<boolean>(true)

  return (
    <div className={styles.nav}>
      <button onClick={() => { setPerm(!perm) }}>导航切换</button>
      {
        perm ?
          <nav>
            <NavLink to="">首页</NavLink>
            <NavLink to="product/123">产品</NavLink>
            <NavLink to="contact">联系我们</NavLink>
            <NavLink to="messages">messages</NavLink>
          </nav> :
          <nav>
            <NavLink to="">首页</NavLink>
            <NavLink to="product/123">产品</NavLink>
          </nav>
      }
    </div>
  )
}


export default Nav

2，父组件传值子组件使用
主要介绍父子传值时interface使用方法，以及使用 React.FC 声明函数组件的方式
父组件

import React from "react"
import { NavLink, Routes, Route, Navigate } from "react-router-dom"
import styles from './APP.scss'

import Nav from './component/Nav/Nav'
import Home from './component/Home/Home'
import Product from "./component/Product/Product"
import Contact from "./component/Contact/Contact"
import Messages from "./component/Messages/Messages"
import MessagesDetails from "./component/MessagesDetails/MessagesDetails"



const APP = () => {
  return (
    <div>
      <Nav id={1} name={"houxh"} bool={true} />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product/:keyword" element={<Product />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/messages" element={<Messages />}>
          <Route path=":id" element={<MessagesDetails />} />
        </Route>
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </div>
  )
}

export default APP

子组件

import React, { useState } from "react"
import { NavLink } from "react-router-dom"
import styles from './Nav.scss'

interface Props {
  id: number；
  name: string；
  bool: boolean；
}

// const Nav = (props: Props) => {
const Nav: React.FC<Props> = (props) => {

  const [perm, setPerm] = useState<boolean>(props.bool)

  return (
    <div className={styles.nav}>
      <button onClick={() => { setPerm(!perm) }}>导航切换</button>
      <span>{props.name}{props.id}</span>
      {
        perm ?
          <nav>
            <NavLink to="">首页</NavLink>
            <NavLink to="product/123">产品</NavLink>
            <NavLink to="contact">联系我们</NavLink>
            <NavLink to="messages">messages</NavLink>
          </nav> :
          <nav>
            <NavLink to="">首页</NavLink>
            <NavLink to="product/123">产品</NavLink>
          </nav>
      }
    </div>
  )
}


export default Nav

3，子组件传值父组件使用
主要介绍结合ts后的函数定义
父组件

import React, { useState } from "react"
import { Outlet } from "react-router-dom"
// import MessagesDetails from "../MessagesDetails/MessagesDetails"
import Conversations from "../Conversations/Conversations"
import styles from './Messages.scss'

const Messages = () => {

  const [count, setCount] = useState<number>(0)

  const getChildProps = (value: number) => {
    setCount(value)
  }

  return (
    <div className={styles.title}>
      <div>{count}</div>
      <Conversations getChildProps={getChildProps} />
      <Outlet />
    </div>
  )
}


export default Messages

子组件

import React from "react"
import styles from './Conversations.scss'

interface Props {
  getChildProps: Function;
}

const Conversations: React.FC<Props> = (props) => {
  return (
    <div className={styles.title}>
      消息列表
      <button onClick={() => props.getChildProps(100)}>子传父</button>
    </div>
  )
}


export default Conversations

4，插槽（默认插槽）
父组件

import React, { useState } from "react"
import { Navigate } from "react-router-dom"

import Children from './Children/Children'
import HOUXH from '../../resource/houxh.png'
import styles from './Contact.scss'

interface User {
  name: string
  age: number
}

const Contact = () => {

  const [names, setNames] = useState<string>('')

  return (
    <div className={styles.title}>
      联系我们
      <img src={HOUXH} alt="" />
      <Sub name={names} age={0} />

      <Children>
        <span>默认插槽</span>
      </Children>
    </div>
  )
}

const Sub = ({ name }: User) => {
  return (
    <div>{name}</div>
  )
}

export default Contact

子组件

import React, { useState } from "react"

interface Props {
  children: JSX.Element;
}

const Children = (props: Props) => {
  return (
    <div>
      {props.children}
    </div>
  )
}

export default Children

5，插槽（具名插槽 props传）
父组件

import React, { useState } from "react"
import { Navigate } from "react-router-dom"

import Children from './Children/Children'
import HOUXH from '../../resource/houxh.png'
import styles from './Contact.scss'

interface User {
  name: string
  age: number
}

const Contact = () => {

  const [names, setNames] = useState<string>('')

  return (
    <div className={styles.title}>
      联系我们
      <img src={HOUXH} alt="" />
      <Sub name={names} age={0} />

      <Children title={<span>具名插槽</span>}></Children>
    </div>
  )
}

const Sub = ({ name }: User) => {
  return (
    <div>{name}</div>
  )
}

export default Contact

子组件

import React, { useState } from "react"

interface Props {
  // children: JSX.Element;
  title: JSX.Element;
}

// const Children = (props: Props) => {
const Children: React.FC<Props> = (props) => {
  return (
    <div>
      {props.title}
    </div>
  )
}

export default Children

6，类型使用
具体几个类型在react中的使用

import React, { useEffect, useState } from "react"
import styles from './Conversations.scss'

interface Props {
  getChildProps: Function;
}

const Conversations: React.FC<Props> = (props) => {

  // 任意类型
  const [num, setNum] = useState<any>(0)
  // 数字类型
  const [numb, setNumb] = useState<number>(0)
  // 布尔类型
  const [bool, setBool] = useState<boolean>(true)
  // 数组类型 ?为可选属性
  const [arr, setArr] = useState<Array<{ name: string, age: number, sex?: boolean }>>([])
  // const [arr, setArr] = useState<Array<{name: string, age: number}>>([{name: 'houxh', age: 1}])
  // 对象
  const [obj, setObj] = useState<{ name: string, age: number, sex: boolean }>({ name: 'houxh', age: 1, sex: true })
  // 组件元素：本质上是抛出一个组件
  const [clockDom, setClockDom] = React.useState<JSX.Element>(<div />)

  useEffect(() => {
    setArr([{
      name: 'houxh1',
      age: 2,
      // sex: true,
    }])
  }, [])

  return (
    <div className={styles.title}>
      消息列表{numb}{num}
      <button onClick={() => props.getChildProps(100)}>子传父</button>
      <button onClick={() => setNum('tsx')}>any</button>
    </div>
  )
}


export default Conversations