将这个 react-redux 函数组件重写为类组件答案

【问题标题】：Rewrite this react-redux function component to class component将这个 react-redux 函数组件重写为类组件
【发布时间】：2017-09-07 12:19:55
【问题描述】：

我按照https://github.com/Microsoft/TypeScript-React-Starter 上的指南设置了我的项目，但它具有将反应组件作为函数的示例。这是我现在拥有的代码：

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>{

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

【问题讨论】：

标签： reactjs typescript redux

【解决方案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>
        );
    }
}

没有“规则”如何转换 - 只需查看 examples 并关注 react docs。

【讨论】：

【解决方案2】：

这是我在typescript-hapi-react-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);

【讨论】：