react中TS类组件的写法

最新推荐文章于 2024-05-01 23:18:43 发布

wandoumm

最新推荐文章于 2024-05-01 23:18:43 发布

阅读量908

点赞数 1

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/wandoumm/article/details/80168503

版权

react 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

类组件最多的就是Typescript接口类型的应用，限制组件状态或者属性符合接口定义

state.tsx

interface IState {
name: string
}

export default class App extends Component<约定属性，约定状态>
export default class App extends Component<any，IState> { // 属性不约束，状态约束
state = {
name: 'xxx' // 这时就会提示类型校验
}
render() {
return (
// ...
setState({name: "yyy"})
// ...
)
}
}

todo.tsx

import React, { Component } from 'react'

interface IState{

list:string[]

}

export default class ClassTest extends Component<any,IState> {

state={

name:'sb',

list:[]

}

change=()=>{

console.log(this.inputRef.current?.value)

this.setState({

list:[...this.state.list,(this.inputRef.current as HTMLInputElement).value]

})

}

inputRef = React.createRef<HTMLInputElement>()

render() {

return (

<div>

<input ref={this.inputRef}></input>

<button onClick={this.change}>name</button>

<ul>

{

this.state.list.map((item,index)=>

<li key={index}>{item}</li>

)

}

</ul>

</div>

)

}

}

props.tsx

export default class App extends Component {
    render() {
        return (
            <div>
                <Child name="aaa">
            </div>
        )
    }
}
interface IProps {
    name: string
}
class Child extends Component<IProps, any> {
    render() {
        return <div>
            {this.props.name}
        </div>
    }
}

drawer.tsx

export default class App extends Component {
  state = {
    isShow: true,
  };
  render() {
    return (
      <div>
        app
        <Navbar
          title="first page"
          cb={() => {
            this.setState({
              isShow: !this.state.isShow,
            });
          }}
        />
        {this.state.isShow && <Sidebar></Sidebar>}
      </div>
    );
  }
}
interface IProps {
  title: string;
  cb: () => void;
}
class Navbar extends Component<IProps, any> {
  render() {
    return (
      <div>
        Navbar-{this.props.title}
        <button
          onClick={() => {
            this.props.cb();
          }}
        ></button>
      </div>
    );
  }
}
class Sidebar extends Component {
  render() {
    return <div>Sidebar</div>;
  }
}