Type '{}' n'est pas cessible de type 'IntrinsicAttributes & IntrinsicClassAttributes

je suis en train d'effectuer un simple réagir application.
c'est mon index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

et ici, j'ai mon app.tsx

    import * as React from 'react';
import SearchBar from '../containers/price_search_bar';

interface Props {
  term: string;
}

class App extends React.Component<Props> {

  //tslint:disable-next-line:typedef
  constructor(props) {
    super(props);
    this.state = {term: '' };
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          this is my application.
        </p>
        <div>
            <form>
            <SearchBar term={this.props.term} />
            </form>
        </div>
      </div>
    );
  }
}

export default App;

et aussi ma barre de recherche contenant:

    import * as React from 'react';

interface Props {
    term: string;
}

//tslint:disable-next-line:no-any
class SearchBar extends  React.Component<Props> {

    //tslint:disable-next-line:typedef
    constructor(props) {
        super(props);
        this.state = { term: '' };
    }

    public render() {
        return(
            <form>
                <input 
                    placeholder="search for base budget"
                    className="form-control"
                    value={this.props.term}
                />
                <span className="input-group-btn" >
                    <button type="submit" className="btn btn-secondary" >
                        Submit
                    </button>
                </span>

            </form>
        );
    }
}

export default SearchBar;

et j'ai enfin mon tsconfig.json:

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Je reçois des différentes erreurs après erreurs et lorsque j'ai jamais corriger une erreur, une autre apparaît, je ne suis pas sûr de ce que j'ai fait que faire se comporter comme cela.
C'est la dernière erreur:

./src/index.tsx
(7,3): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<App> & Readonly<{ children?: ReactNode; }> & Reado...'.
  Type '{}' is not assignable to type 'Readonly<Props>'.
    Property 'term' is missing in type '{}'.

J'ai essayé de le corriger en modifiant mon tsconfig.json mais le même message d'erreur s'affiche toujours, ce que je fais mal et pourquoi tapuscrit est bahing comme ça. Je suis très nouveau à cela et par cet exemple, je suis en train de udnertand comment réagir travaille tous ensemble.

Pourquoi avez-vous besoin {} ici React.Component<Props, {}>?
J'ai changé dans le vide, également objet, mais le même!
Ce qui se passe quand vous venez de passer les Accessoires et rien d'autre?
class App extends React.Component<Props> { également retourne la même erreur qu'avant!
Et quand vous passez any?
Jetez un oeil ici stackoverflow.com/a/47388544/6219957
merci l'erreur, est maintenant disparu, mais ma barre de recherche ne fonctionne plus!
Que voulez-vous dire
Aussi, vous êtes de passage à la term prop dans App un accessoire, mais vous n'avez jamais fourni à l' App composant lorsque vous le rendre.
Je suis en train de faire une barre de recherche qui fonctionnent quand u type dans une entrée, de sorte que u doit eb pouvez le voir dans la console. J'ai changé mon code un peu, j'obtiens toujours la même erreur, au niveau de l'index.tsx!
Mais il n'y a pas d'accessoires qui sont passés à l'Application, donc il n'y aura aucune valeur rendue dans la barre de recherche.
c'est ce que j'essayais todo si cette erreur serait de s'en aller!
Je ne comprends pas
ReactDOM.render(<App terme="toto" />, document.getElementById('root') comme HTMLElement);

InformationsquelleAutor S. N | 2018-01-13

5

J'ai résolu beaucoup de "pas cessible de type 'IntrinsicAttributes & IntrinsicClassAttributes" type d'erreurs (Microsoft fermés problème) juste en déclarant un objet qui est passé entièrement à la composante.

Avec l'OP exemple, au lieu d'utiliser term={this.props.term}, utilisez {...searchBarProps} pour le faire fonctionner:
```
render() {
  const searchBarProps = { //make sure all required component's inputs/Props keys&types match
    term: this.props.term
  }
  return (
    <div className="App">
      ...
      <div>
          <form>
          <SearchBar {...searchBarProps} />
          </form>
      </div>
    </div>
  );
}
```
- C'est très intelligent de truc, merci beaucoup
InformationsquelleAutor CPHPython
3

Le problème ici n'est pas avec votre tslint paramètres. Regardez l'extrait de code suivant:
```
interface SearchBarProps {
  term: string;
  optionalArgument?: string;
}

interface SearchBarState{
  something: number;
}

class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
  constructor(props: SearchBarProps){
    super(props);

    this.state = {
      something: 23
    };
  }

  render() {
    const {something} = this.state;
    return (
      <div>{something}</div>
    )
  }
}
```
Dans class SearchBar extends React.Component<SearchBarProps, SearchBarState> {, SearchBarProps et SearchBarState désigner le type d'attendre des accessoires et de la nature de l'état pour le composant SearchBar respectivement. Vous devez donner propTypes et stateType lorsque vous utilisez la machine.

Vous pouvez éviter de donner des types en utilisant le mot - any mais je vous suggère fortement de ne pas suivre ce "mal" chemin d'accès si vous voulez vraiment prendre avantage de l'utilisation de la machine. Dans votre cas, il semble que vous n'avez pas spécifié le type d'état et l'a utilisé, fixation qui permettra de résoudre ce problème.

Edit 1

Dans l'interface SearchBarProps, optionalArgument devient un argument optionnel car nous ajoutons un point d'interrogation ? en face d'elle, afin <SearchBar term='some term' /> ne vais pas vous montrer toute erreur, même si vous ne passez pas optionalArgument explicitement.

Espérons que cela résout votre problème!
- merci pour le asnwer, cependant, je suis toujours confronté au même erreur si je utiliser ce contenant à la place de l'autre.
- d'attente, a ajouté quelque chose comme cela <SearchBarPrice term="s"/> et elle a effectivement travaillé!
- Bien sûr, si il vous manque quelques arguments obligatoires, il affichera l'erreur. Si vous voulez des arguments facultatifs je suis l'ajout de code à la façon d'atteindre cet objectif en réponse originale à cette question. Et vous pouvez accepter la réponse si elle répond à votre question.
- SN, on doit accepter l'une des réponses ci-dessus que l'on a accepté la réponse, car ils ne sont en effet répondre à votre question.
- veuillez accepter la réponse si il résolu votre problème correctement
- merci pour la réponse, après que j'avais appliqué d'autres façons de faire la tâche, de cette façon est la meilleure
InformationsquelleAutor Swapnil
2

Juste eu ce même problème.

Vous avez membre appelé terme défini sur la Prop interface de votre Application de classe, mais vous n'êtes pas fournir une valeur lorsque vous créez votre Application élément.

Essayez ce qui suit:
```
ReactDOM.render(<App term="Foo" />, document.getElementById('root') as HTMLElement);
```
InformationsquelleAutor Stephen Hewison
0

J'ai aussi été confronté au même problème. Ajouter le code ci-dessous pour travailler avec .tsx composants.
```
export interface Props {
  term: string;
}
```
ou
```
export type Props = {
  term ?: string;
}
```
Je ne sais pas la raison exacte, mais je pense que tapuscrit drapeau le type d'erreur pendant la phase de compilation. Laissez-moi savoir si cela fonctionne pour vous.

InformationsquelleAutor niraj17

Vous devez vous connecter pour publier un commentaire.