web-dev-qa-db-fra.com

Reactjs, TypeScript - la propriété n'existe pas sur le composant enfant

J'utilise TypeScript 2.3.4 avec React. J'obtiens l'erreur TS2339: erreur TS2339: la propriété 'nom' n'existe pas sur le type 'Lecture seule <{enfants?: ReactNode; }> & Lecture seule <{}> '. L'erreur se produit lorsque j'essaie de déclarer la propriété dans un composant enfant. Comment référencer correctement la propriété dans le composant enfant?

Pour une raison quelconque, le code ne s'exécute pas dans le script runner.

toute aide est appréciée.

export interface person {
    name: string;
    age: number;
}

interface State {
    personArray: person[];
}

interface Props {

}


class ProfileData extends React.Component<{}, person> {
    public render() {
        return (
            <section>
                <section>
                    <h3>profile 1</h3>
                    <div>{this.props.name}</div>
                </section>
            </section>
        )

    }
}

export class Profile extends React.Component<Props, State> {
    public state: State;
    public props: Props;
    constructor(props: Props){
        super(props);
            this.state = {
                personArray: [
                    {
                        name: 'bazaaa', 
                        age: 42
                    },
                    {
                        name: 'louis', 
                        age: 24
                    }
                ]
            };
    }

    public render() {
        let profile1 = this.state.personArray[0];
        return (
            <ProfileData 
            name={profile1.name}
            />
        )
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
reactjstypescript
13
Jimi

Vous avez oublié de déclarer name comme une propriété React dans la définition de classe ProfileData. Quelque chose comme ça devrait fonctionner:

class ProfileData extends React.Component<{name: string}, person> {
21
Oblosys