このreact-redux関数コンポーネントをクラスコンポーネントに書き直します

Question

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

で動作するように適応する方法を学習したいと思います。 これを設定する方法や原則はありますか？クラスコンポーネントに変換

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> 
     ); 
    } 
} 

どのように変換するために - ちょうどexamplesを見て、react docsに従ってください。ここで

Answer 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); 

でそれをやった方法です