Loading...
墨滴

槑槑

2021/03/31  阅读:11  主题:默认主题

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

槑槑

2021/03/31  阅读:11  主题:默认主题

作者介绍

槑槑