Réagir Routeur - Tapuscrit erreurs sur withRouter après la mise à jour de la version

J'ai juste essayé de mettre à jour mon Réagir application de

réagir-routeur - 4.0.19 à 4.0.20

réagir - 16.0.30 à 16.0.34

tapuscrit - "version 2.7.0-initiés.20180108"

Dans mon application, partout où je suis à l'aide de 'withRouter', j'obtiens maintenant cryptique Tapuscrit erreurs. J'ai même remplacé interface tous les accessoires avec "tout" simplement pour essayer de le faire fonctionner.

import * as React from 'react';
import { Switch, Route, withRouter} from 'react-router-dom';
import { Login } from './Login';
import { connect } from 'react-redux';
import { RootAction, RootState } from './_redux';

class MainForm extends React.Component<any> {

  constructor(props: any) {
    super(props);
  }

  render() {

    return (
      <Switch>
        <Route exact={true} path="/" component={Login}/>
        <Route  path="/accounts" component={AccountsView}/>
      </Switch> 
    );
  }
}

const mapStateToProps = (state: RootState) => ({
  state
});

export const Main = withRouter(connect(mapStateToProps)(MainForm);

erreur TS2345: Argument de type 'ComponentClass> & {
WrappedComponent: ComponentType; }' n'est pas assignable à
paramètre de type 'ComponentType>'. Type
'ComponentClass> & { WrappedComponent:
ComponentType; }' n'est pas assignable à type de
'StatelessComponent>'.
Type 'ComponentClass> & { WrappedComponent: ComponentType; }' offre pas de match pour la signature '(objets de décoration:
RouteComponentProps & { enfants?: ReactNode; }, contexte?: tout):
ReactElement | null".

Si je convertir la dernière ligne :

export const Main = connect(mapStateToProps)(MainForm);

Je n'ai pas d'erreurs. sérieusement frustrés ici.
Grâce

MODIFIER, j'ai changé pour

export const Main = connect(mapStateToProps)(withRouter(MainForm));

comme suggéré par Mayank Shukla. mais maintenant, obtenez l'erreur:

erreur TS2345: Argument de type 'ComponentClass>' est
pas assignable à paramètre de type 'ComponentType<{ etat: RootState;
} & DispatchProp>'. Type 'ComponentClass>' est
pas cessible de type 'StatelessComponent<{ etat: RootState; } &
DispatchProp>'.
Type 'ComponentClass>' offre pas de match pour la signature '(objets de décoration: { etat: RootState; } & DispatchProp & {
les enfants?: ReactNode; }, contexte?: échéant): ReactElement | null".

essayez ceci: connect(mapStateToProps)(withRouter(MainForm))
merci @MayankShukla. je pense que c'est le progrès, mais maintenant je reçois l'erreur , comme expliqué ci-dessus.
Je suppose que votre syntaxe est incorrecte, withRouter(connect(mapStateToProps)(MainForm)), vous avez besoin d'un supplément d'une parenthèse fermante à la fin
je le fixe, mais toujours la même erreur 🙁

OriginalL'auteur 29er | 2018-01-12

Je viens de mettre à Tapuscrit 2.6 et a obtenu le même problème.

J'ai réussi à le résoudre en utilisant RouteComponentProps.

URL http://localhost:8080/your-component/abc et de la route

<Route component={YourComponent} path="/your-component/:param1?" />

Composant devrait ressembler à ceci:

import * as React from 'react'
import { withRouter } from 'react-router-dom';
import {RouteComponentProps} from "react-router";

//Type whatever you expect in 'this.props.match.params.*'
type PathParamsType = {
    param1: string,
}

//Your component own properties
type PropsType = RouteComponentProps<PathParamsType> & {
    someString: string,
}

class YourComponent extends React.Component<PropsType> {
    render() {

        console.log(this.props); //Prints all props including routing-related
        console.log(this.props.match.params.param1); //Prints 'abc'
        console.log(typeof this.props.match.params.param1 === 'string'); //prints 'true'

        return <div>...</div>;
    }
}

export default withRouter(YourComponent);

bon à savoir! En fait je viens de supprimé withRouther entièrement dans l'application et est allé avec l'aide de BrowserRouter. importer { BrowserRouter en tant que Routeur, Route, RouteComponentProps } à partir de 'réagir-routeur-dom'; Pour une raison quelconque faisant cela m'a permis de m'en débarrasser et passer de routage des accessoires.

OriginalL'auteur Pavel

Je dois résoudre comme ceci:

import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface IProps extends RouteComponentProps<any> {
  title: string;
}

class MyComp extends React.Component<IProps> {
    public render(){
        return (
           <h1>{this.props.title}</h1>
        )
    }
}

export default withRouter<IProps>(MyComp);

Je savais RouteProps, pas RouteComponentProps. Merci ;p

OriginalL'auteur jakobdo

Voici comment j'ai l'habitude de structure de ma tapé Réagir composants:

//These props are provided when creating the component
interface OwnProps {
    //...
}

//These props are provided via connecting the component to the store
interface StateProps {
    //...
}

//These props are provided by the router
interface PathProps {
    //...
}

class Component extends React.Component<OwnProps & StateProps & RouteComponentProps<PathProps>> {
    //...
}

const mapStateToProps = (state: State, props: OwnProps): StateProps => ({
    //...
});

export default withRouter(
    connect(mapStateToProps)(Component)
);

OriginalL'auteur Max

1

Une autre solution, à l'aide de décorateurs
```
import { withRouter, RouteComponentProps } from "react-router";

//inform we match url /:id
interface IMatchParams {
    id: string;
}

//Note we use Partial<RouteComponentProps> to make all RouteComponentProps as optional for high order component
interface IComponentProps extends Partial<RouteComponentProps<IMatchParams>> {
    myPersonalProp: string;
}

@withRouter
export default class MyClass extends React.Component<IComponentProps>{

    public componentDidMount(){
        console.log(this.props.match.params.id);
    }
}
```
Merci Daniel. bon, avez-vous l'esprit de me demander ce que les autres libs vous avait besoin d'apporter votre construction à l'appui de décorateurs ? J'ai essayé de ne pas trop longtemps et viens de croiser trop de TS les erreurs...donc donné jusqu'
La première étape que vous devez faire en ajoutant à la tsconfig.json sous compilerOptions le drapeau experimentalDecorators: true. Si vous avez encore des questions, changer la compilation target à l'es5, si la cible est es7 il ne transpile le décorateur et de la plupart des navigateurs \ nœud versions ne le supporte pas encore.
merci @Daniel l! je l'ai eu à travailler 🙂

OriginalL'auteur Daniel Krom

De travail sur la syntaxe de la variante de Type Script de l'application est:

    import * as React from 'react';
    import { connect } from 'react-redux';
    import { withRouter } from 'react-router-dom';

    class MyComponentName extends React.Component<any, any> {
        constructor(props: any) {
            super(props);
        }
    }

    export default withRouter(
    connect(
        mapStateToProps
      )(MyComponentName) as any
    );

"J'aime utiliser la Machine dans mon projet, mais je donne tout un type de tout et ça marche!!!!"
Vous avez raison. Mais ce seul exemple à propos de la composante syntaxe de connexion, pas sur la machine.

OriginalL'auteur Jackkobec

Vous devez vous connecter pour publier un commentaire.