react 方法的写法

import React from 'react'
import {Card, Button} from 'antd'
import './index.less'
export default class Buttons extends React.Component{
    //第一种方法  不用标签内传this
    handleCloseLoading = ()=>{

    }

    //第二种 需要标签内传this
    handleCloseHide(){

    }

    render(){
        return(
            <div>
                <Card title="基本样式">
                    <Button type="primary" onClick={this.handleCloseLoading}>确定</Button>
                    <Button onClick={this.handleCloseHide.bind(this)}>取消</Button>
                    <Button type="dashed">虚线</Button>
                    <Button type="danger">警告</Button>
                    <Button disabled >禁止点击</Button>
                </Card>

                <Card title="图形按钮">
                    <Button icon="android" type="primary">图标</Button>
                    <Button icon="file-search" shape="circle"></Button>
                    <Button icon="shopping" type="dashed">虚线</Button>
                    <Button icon="loading" type="danger">警告</Button>
                    <Button icon="pie-chart" disabled >禁止点击</Button>
                </Card>
            </div>
        )
    }
}
### 使用 TypeScript (TSX) 编写 React 组件 #### 创建函数式组件 当使用TypeScript编写React组件时,推荐定义`props`接口来描述传递给组件的数据类型。下面是一个简单的例子展示如何创建一个带有属性类型的函数式组件。 ```tsx import React from 'react'; // 定义Props接口 interface GreetingProps { name: string; } const Greeting: React.FC<GreetingProps> = ({name}) => ( <div>Hello, {name}!</div> ); export default Greeting; ``` 此代码片段展示了怎样通过定义`GreetingProps`接口指定传入参数的名字及其数据类型为字符串,并将其应用于泛型形式的`React.FC`中以增强类型安全性[^3]。 #### 添加状态管理 对于需要内部状态逻辑的功能组件来说,在TypeScript里可以借助于`useState`钩子并同样为其设置合适的类型约束。 ```tsx import React, { useState } from 'react'; interface CounterProps {} const Counter: React.FC<CounterProps> = () => { const [count, setCount] = useState<number>(0); return ( <> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </> ); }; export default Counter; ``` 这里声明了一个名为`Counter`的状态化功能组件,它拥有一个计数器变量`count`以及更新它的方法`setCount`。注意这里的初始值被赋予了具体的数值类型标注。 #### 类组件转换 如果要将类组件迁移到TypeScript,则需继承自`React.Component<Props, State>`并将prop和state的具体形状作为泛型参数提供给基类构造器。 ```tsx class App extends React.Component<{ message: string }, { count: number }> { constructor(props: { message: string }) { super(props); this.state = { count: 0 }; } render() { return ( <div> <h1>{this.props.message}</h1> <p>Clicked {this.state.count} times.</p> {/* ... */} </div> ); } } ``` 上述示例中的App类接收了一个具有message字段的对象作为其唯一属性,并维护着自身的状态对象包含单个整数成员count用于记录点击次数。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值