2017-06-11 3 views
3

Ich verwende Typoskript 2.3.4 mit React. Ich erhalte den Fehler TS2339: Fehler TS2339: Eigenschaft 'name' existiert nicht für den Typ 'Readonly < {children ?: ReactNode; }> & Readonly < {}> '. Der Fehler tritt auf, wenn ich versuche, die Eigenschaft in einer untergeordneten Komponente zu deklarieren. Wie referenziere ich die Eigenschaft richtig in der untergeordneten Komponente?Reactjs, Typescript - Eigenschaft existiert nicht für untergeordnete Komponente

Aus irgendeinem Grund wird der Code im Skript Runner nicht ausgeführt.

jede Hilfe wird geschätzt.

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>

+0

"Aus irgendeinem Grund wird der Code nicht im Skript Runner ausgeführt." --- Es ist nicht da es nicht JS ist. – zerkms

+0

Ich tickte Babel, dachte, es würde transpilieren – Jimi

Antwort

4

Sie haben vergessen name als Reaktion Eigenschaft in der ProfileData Klassendefinition zu erklären. So etwas sollte funktionieren:

class ProfileData extends React.Component<{name: string}, person> { 
+0

Vielen Dank. funktionierte wie ein Leckerbissen. – Jimi

Verwandte Themen