reactjs - วิธีการนำเข้า React JSX จากไฟล์แยกอย่างถูกต้องใน Typescript 1.6

ฉันมีไฟล์ app.tsx ดังต่อไปนี้ที่ทำงานได้ดีโดยโหลดองค์ประกอบ App จาก React.Component และองค์ประกอบลูก Worklist จาก React.Component อีกตัวหนึ่ง (ทั้งสองคลาสถูกกำหนดในไฟล์ app.tsx เดียวกัน) ซึ่งกำลังรันใน Visual Studio พร้อมกับติดตั้ง Typescript 1.6 (เวอร์ชัน ECMAScript: ECMAScript 5, การคอมไพล์ JSX: React, ระบบโมดูล: CommonJS)

อย่างไรก็ตาม ผมต้องการแยกสองส่วนประกอบนี้ออกเป็นไฟล์แยกต่างหาก อย่างไรก็ตาม เมื่อผมยกเลิกการคอมเมนต์การ import ของ WorkList และลบคำนิยามคลาสของคอมโพเนนต์ WorkList จาก app.tsx - มันก็ล้มเหลวพร้อมกับข้อผิดพลาด:

ข้อผิดพลาด TS2604 ประเภทองค์ประกอบ JSX 'WorkList' ไม่มีตัวสร้างหรือสัญญาลักษณ์การเรียกใช้งานใด ๆ

นี่คือไฟล์ 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" />

วิธีที่ถูกต้องในการนำเข้า JSX ของลูกด้วย Typescript 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>
    }
}

คำตอบ #1

ฉันคาดว่าคุณจำเป็นต้องส่งออกคลาส WorkList ในไฟล์ worklist.tsx อย่างถูกต้อง เช่น การส่งออกเป็นค่าเริ่มต้น:

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

และจากนั้นนำเข้ามาใน app.tsx:

import WorkList from "worklist"

นี่ควรจะแก้ปัญหาของคุณได้