React+Typescript使用接口泛型处理props

news2024/9/27 5:59:55

好刚讲完组件那么这次我们来看一下数据传递的 props

还是上文的案例例如我们想将 title 传给Hello组件
之前我们可以直接这样
在这里插入图片描述
以一个标签属性的形式传过去

而我们在子组件中这样去使用
在这里插入图片描述
但现在我们从编辑器中都可以看出这种写法已经不行了

然后我们将 hello 组件改成这样

import * as React from "react";

interface IProps {
    title: string
}

export default class hello extends React.Component<IProps> {

    public constructor(props:any){
        super(props);
    }
    public render() {
        return (
            <div>{ this.props.title }</div>
        )
    }
}

其中最大的不同在于我们定义了一个接口 IProps
规定里面要有一个 string字符串类型的字段叫title
然后挂到 react的Component上进行泛型
然后这是我们的父子组件就都不报错了
在这里插入图片描述

当然我们可以传多个数据

这里我们给子组件一个 age 数字 20
在这里插入图片描述
然后子组件规定一下类型

这里我们用了Number 说他是个数字类型那么我们父组件尝试改成字符串试试

很显然这里就报错了这也是Ts的一个意义能够加强代码的规范和可读性

好最后父组件代码如下

import Hello from "./components/hello";

function App() {
  return (
    <div className="App">
        hello React Typescript
        <Hello title = "高阶组件" age = { 20 } />
    </div>
  );
}

export default App;

子组件代码

import * as React from "react";

interface IProps {
    title: string,
    age: number
}

export default class hello extends React.Component<IProps,any> {

    public constructor(props:any){
        super(props);
    }
    public render() {
        return (
            <div>
                <div>{ this.props.title }</div>
                <div>{ this.props.age }</div>
            </div>
        )
    }
}