टाइपस्क्रिप्ट 1.6

Question

में अलग फ़ाइल से सटीक जेएसएक्स को सही तरीके से आयात करने के लिए कैसे करें मेरे पास निम्न app.tsx फ़ाइल है जो एक React.Component से एक ऐप तत्व ठीक से काम कर रही है और एक बच्चे से वर्कलिस्ट तत्व किसी अन्य प्रतिक्रिया। कॉम्पोनेंट (दोनों कक्षाओं में परिभाषित कक्षाएं एक ही app.tsx फ़ाइल)। यह विजुअल स्टूडियो में टाइपस्क्रिप्ट 1.6 स्थापित (ईसीएमएस्क्रिप्ट संस्करण: ईसीएमएस्क्रिप्ट 5, जेएसएक्स संकलन: प्रतिक्रिया, मॉड्यूल सिस्टम: कॉमनजेएस) के साथ चल रहा है।

हालांकि, मैं इन दो घटकों को अलग-अलग फ़ाइलों में विभाजित करना चाहता हूं। हालांकि, जब मैं WorkList के आयात uncomment और app.tsx से WorkList घटक के लिए वर्ग परिभाषा नहीं निकालेगा - यह एक त्रुटि के साथ विफल:

Error TS2604 JSX element type 'WorkList' does not have any construct or call signatures.

यहाँ app.tsx काम करने और वांछित worklist.tsx है।

// app.tsx 
import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
//import * as WorkList from "./worklist"; 

interface Props { 
    foo: string; 
} 

class WorkList extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    render() { 
     return <h2>WorkList!{this.props.foo} </h2> 
    } 
} 
class App extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    public render() { 
     return <WorkList foo="baz"></WorkList> 
    } 
} 


ReactDOM.render( 
    React.createElement(App, { foo: 'bar' }), 
    document.getElementById('app') 
); 




//worklist.tsx 
import * as React from "react"; 

interface Props { 
    foo: string; 
} 

class WorkList extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    render() { 
     return <h2>WorkList!{this.props.foo} </h2> 
    } 
} 

<WorkList foo="bar" /> 

टाइपस्क्रिप्ट 1.6 के साथ एक बच्चे जेएसएक्स आयात करने का उचित तरीका क्या है?

// app.tsx 
import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
import WorkList from "./worklist"; 

interface Props { 
    foo: string; 
} 

class App extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    public render() { 
     return <WorkList foo="baz"></WorkList> 
    } 
}  
ReactDOM.render(

    React.createElement(App, { foo: 'bar' }), 
    document.getElementById('app') 
); 

//worklist.tsx 
import * as React from "react"; 

interface Props { 
    foo: string; 
} 

export default class WorkList extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    render() { 
     return <h2>WorkList!{this.props.foo} </h2> 
    } 
} 

Answer 1

मैं उम्मीद है, कि तुम ठीक से worklist.tsx फ़ाइल में WorkList वर्ग निर्यात करने के लिए की जरूरत है उदहारण के लिए:

यहाँ सही जवाब के साथ काम कर रहे कोड लागू किया है

export default class WorkList extend React.Component<Props, {}> 

और फिर app.tsx में आयात: default निर्यात के रूप में

import WorkList from "worklist" 

यह आपकी समस्या का समाधान करना चाहिए।