Reactjs 将类组件转换为函数组件

我已经用React-Redux和TypeScript创建了一个web应用程序项目。（与2019年相比）

为我创建了一个模板项目，其中包含很少的类组件（计数器、天气预报…）。 现在，我尝试将类组件计数器转换为函数组件。 目前没有成功的案例。 我需要帮助

类组件是：

import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { ApplicationState } from '../store';
import * as CounterStore from '../store/Counter';

type CounterProps =
    CounterStore.CounterState &
    typeof CounterStore.actionCreators &
    RouteComponentProps<{}>;

class Counter extends React.PureComponent<CounterProps> {
    public render() {
        return (
            <React.Fragment>
                <h1>Counter</h1>

                <p>This is a simple example of a React component.</p>

                <p aria-live="polite">Current count: <strong>{this.props.count}</strong></p>

                <button type="button"
                    className="btn btn-primary btn-lg"
                    onClick={() => { this.props.increment(); }}>
                    Increment
                </button>
            </React.Fragment>
        );
    }
};

export default connect(
    (state: ApplicationState) => state.counter,
    CounterStore.actionCreators
)(Counter);

import*as React from'React'；
从'react redux'导入{connect}；
从“react router”导入{RouteComponentProps}；
从“../store”导入{ApplicationState}；
从“../store/Counter”导入*作为计数器存储；
类型对销=
反态&
CounterStore.actionCreators的类型&
路由组件支柱；
类计数器扩展了React.PureComponent{
公共渲染（）{
返回(
柜台
这是React组件的一个简单示例

当前计数：{this.props.count}

{this.props.increment（）；}}>
增量
);
}
};
导出默认连接(
（状态：ApplicationState）=>state.counter，
反存储操作创建者
)（柜台）；

感谢您的回复。我明白应该怎么做：

type CounterComponentProps =
     CounterStore.CounterState &
     typeof CounterStore.actionCreators &
     RouteComponentProps<{}>;

const Counter = (props: CounterComponentProps) => {

    return (
        <React.Fragment>

          <h1>Counter</h1>

          <p>This is a simple example of a React component.</p>

          <p aria-live="polite">Current count: <strong>{props.count}</strong></p>

          <button type="button"
                className="btn btn-primary btn-lg"
                onClick={() => { props.increment(); }}>
                Increment
          </button>
      </React.Fragment>
    );

};

export default connect(
    (state: ApplicationState) => state.counter,
    CounterStore.actionCreators)(Counter as any)

类型计数器组件支柱=
反态&
CounterStore.actionCreators的类型&
路由组件支柱；
常量计数器=（道具：计数器组件道具）=>{
返回(
柜台
这是React组件的一个简单示例

当前计数：{props.count}

{props.increment（）；}}>
增量
);
};
导出默认连接(
（状态：ApplicationState）=>state.counter，
CounterStore.actionCreators（计数器，如有）

您能分享一下您卡住的功能部件吗？谢谢