reactjs - 将类组件转换为函数组件
问题描述
我已经使用 React Redux 和 TypeScript 创建了一个 Web 应用程序项目。(在 VS 2019 中)。
为我创建了一个模板项目,其中包含几个类组件(Counter、WeatherForecast ....)。现在,我正在尝试将类组件 - Counter - 转换为 Function 组件。目前没有成功。我需要帮助。
类组件是:
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);
解决方案
谢谢您的答复。我明白应该怎么做:
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)
推荐阅读
- c - 计算 n! 和 x^n 并进行计算
- encoding - 编码时如何设置严格的音频比特率?
- facebook - Facebook Post Insights 用于个人信息流?
- python - `not x in y` 是否遵循运算符优先级规则?
- nginx - 如何通过取第一段来重写随机生成的 nginx 路径?
- python - 尝试使用 strptime 将 str 转换为 datetime 并出现错误
- google-sheets - 将行从 jotform 添加到 Google 工作表时如何运行拆分单元格数据的功能
- java - 使用 google libPhone 获取给定 ISO2 国家/地区代码的电话 ISD 国家/地区代码
- javascript - 使用条件左右移动字符串字符
- python - 如果检查元素单击的语句不会被拦截(Python Selenium)