React-08TS版本各种基础练习

类组件

通过Interface约束state类型

import React, { Component } from 'react'

interface IPerson {
  name: string
}

export default class States extends Component<any, IPerson> {

  state = {
    name: '张三'
  }

  render() {
    return (
      <div>{this.state.name}
        <button onClick={() => {
          this.setState({
            name: "lisi"
          })
        }}>change</button>
      </div>
    )
  }
}

属性约束

import React, { Component } from 'react'

export default class Props extends Component {
  render() {
    return (
      <div>
        <CHild name='hahh'></CHild>
      </div>
    )
  }
}

interface IProps {
  name: string
} 

export class CHild extends Component<IProps, any> {
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    )
  }
}

子传父点击隐藏

import React, { Component } from 'react'

interface IRoot {
  hide: boolean
}

export default class RootComponent extends Component<any,IRoot> {

  state = {
    hide:true
  }

  render() {
    return (
      <div>
        <NavBar title='哈哈哈' callback={() => {
          this.setState({
            hide:!this.state.hide
          })
        }}></NavBar>
        {this.state.hide && <SideBar></SideBar>}
      </div>
    )
  }
}

interface IBar {
  title: string,
  callback: () => void
}

export class NavBar extends Component<IBar, any> {
  render() {
    return (
      <div>
        {this.props.title}
        <button onClick={() => {
          this.props.callback()
        }}>点击</button>
      </div>
    )
  }
}

export class SideBar extends Component {
  render() {
    return (
      <div>子传父隐藏</div>
    )
  }
}

函数组件

通过Interface约束state类型

import React, { useState } from 'react'

export default function FuncState() {

  const [name, setname] = useState<string>('zhangsan')

  return (
    <div>
      <button onClick={() => {
        setname('法外狂徒')
      }}>变身</button>
    </div>
  )
}

属性约束

import React from 'react'

export default function FuncProps() {
  return (
    <div>
      <Child name='abc'></Child>
    </div>
  )
}

interface IProps {
  name: string
}

function Child(props: IProps) {
  return <div>
    {
      props.name
    }
  </div>
}

Ref

import React, { useRef, useState } from 'react'

export default function FuncRef() {

  const myInputText = useRef<HTMLInputElement>(null)
  const [list, setlist] = useState<string[]>([])

  return (
    <div>
      <input type="text" ref={myInputText}/>
      <button onClick={() => {
        console.log((myInputText.current as HTMLInputElement).value);
        setlist([...list, (myInputText.current as HTMLInputElement).value])
      }}>输出</button>
      {
        list.map(item =>
          <li key={item}>{item}</li>
          )
      }
    </div>
  )
}

子传父点击隐藏

//默认属性
import React, { useState } from 'react'

export default function FuncDraw() {
  const [isShow, setisShow] = useState(true)

  return (
    <div>
      <NavBar title='哈哈哈哈哈' callback={() => {
        setisShow(!isShow)
      }}></NavBar>
      {isShow && <SideBar></SideBar>}
    </div>
  )
}
interface IBar {
  title: string,
  callback: () => void
}
function NavBar(props: IBar) {
  return <div>
    NavBar<button onClick={() => {
      props.callback()
    }}>hide</button>
  </div>
}

function SideBar() {
  return <div>
    SideBar
  </div>
}