将此React-Redux函数组件重写为类组件

Question

我遵循指南https://github.com/microsoft/typescript-react-react-starter来设置我的项目，但是它以react组件为函数的示例。这是我现在拥有的代码：

export interface Props {
    name: string;
    enthusiasmLevel?: number;
    onIncrement?: () => void;
    onDecrement?: () => void;
}
function SessionList({ name, enthusiasmLevel = 1, onIncrement, onDecrement }: Props) {
        return (
            <div className="App">
                hello {name}
            </div>
        );
}
export function mapStateToProps({ enthusiasmLevel, languageName }: StoreState) {
    return {
        enthusiasmLevel,
        name: languageName,
    };
}
export function mapDispatchToProps(dispatch: Dispatch<actions.EnthusiasmAction>) {
    return {
        onIncrement: () => dispatch(actions.incrementEnthusiasm()),
        onDecrement: () => dispatch(actions.decrementEnthusiasm()),
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(SessionList);

我想学习如何适应

class SessionList extends  React.Component<any>{

我会遇到各种类型的问题和编译错误。是否有任何指南或原则如何设置？

Answer 1

转换为类组件，可能看起来像这样的地方：

export interface Props {
    name: string;
    enthusiasmLevel?: number;
    onIncrement?: () => void;
    onDecrement?: () => void;
}
interface State {
    // Your state definition will go here if required
}
export class SessionList extends React.Component<Props, State>
{
    constructor(props: Props, context: any)
    {
        super(props, context);
        this.state = {
            // Initialize your state here if needed
        };
    }
    public render()
    {
        return (
            <div className="App">
                hello {this.props.name}
            </div>
        );
    }
}

没有"规则"如何转换 - 只需查看示例并关注React文档。

Answer 2

这是我在打字机-HAPI-REACT-HOT-HOT-LOADER-example

中完成的方式

import * as React from 'react';
import {connect} from 'react-redux';
import UserAction from '../../stores/user/UserAction';
import MetaAction from '../../stores/meta/MetaAction';
import IStore from '../../interfaces/stores/IStore';
import {Dispatch} from 'redux';
import IMetaReducerState from '../../interfaces/stores/reducers/IMetaReducerState';
import IUserReducerState from '../../interfaces/stores/reducers/IUserReducerState';
interface IStateToProps {
    readonly user: IUserReducerState;
}
interface IDispatchToProps {
    loadUser: () => void;
    setMeta: (meta: IMetaReducerState) => void;
}
const mapStateToProps = (state: IStore): IStateToProps => ({
    user: state.userReducer,
});
const mapDispatchToProps = (dispatch: Dispatch<any>): IDispatchToProps => ({
    loadUser: () => dispatch(UserAction.loadUser()),
    setMeta: (meta: IMetaReducerState) => dispatch(MetaAction.setMeta(meta)),
});
class Home extends React.Component<IStateToProps & IDispatchToProps, {}> {
    public componentWillMount(): void {
        this.props.setMeta({
            title: 'Home Page',
            description: 'This is the Home Page',
        });
    }
    public render(): JSX.Element {
        const user = this.props.user;
        return (
            <div>
                <div className="jumbotron">
                    <h1 className="display-3">{user.name.title} {user.name.first} {user.name.last}</h1>
                    <img
                        className="rounded mx-auto d-block"
                        src={user.picture.large}
                        alt=""
                    />
                    <p>
                        <button
                            className="btn btn-lg btn-success"
                            onClick={this.props.loadUser}
                        >
                            {'Load Another User'}
                        </button>
                    </p>
                </div>
            </div>
        );
    }
}
export default connect<IStateToProps, IDispatchToProps, {}>(mapStateToProps, mapDispatchToProps)(Home);