react组件的props

第一个组件

import React, {Component} from "react";

export default class App extends Component<any, any> {
    render() {
        return (
            <>
                app
            </>
        )
    }
}

1. 引入依赖文件
2. 继承和导出
3. 定义render方法，返回一个ReactNode，一个节点，返回的是一个双标签
4. Component<props,state>,第一个是属性，第二个是状态。props是只读的，初始化是什么就是什么，在运行当中是不可以修改的。

import React, {Component} from "react";

interface IProps {
    name: string
}

export default class App extends Component<IProps, any> {

    render() {
        return (
            <>
                {this.props.name}
            </>
        )
    }
}

使用示例

    <App name={'Tom'} />

属性多种数据类型示例

import React, {Component} from "react";

interface IProps {
    name: string
    auth: boolean
}

export default class App extends Component<IProps, any> {

    render() {
        return (
            <>
                {this.props.name}
                <br/>
                {this.props.auth === true ? 'true' : 'false'}
                <hr/>
            </>
        )
    }
}

使用示例

        <App name='Tom' auth={false}/>
        <App name='Tom' auth/>
        <App name='Tom' auth={true}/>

运行结果

Tom
false
Tom
true
Tom
true