javascript - Kan React JSX niet importeren vanuit een apart bestand tijdens het gebruik van Typescript

Het probleem is vergelijkbaar met Hoe importeer je React JSX correct vanuit een apart bestand in Typescript 1.6.

Het werkt goed wanneer alle code in één bestand staat. Maar wanneer ik de component naar een ander bestand verplaats en probeer te importeren, geeft de TypeScript-compiler een fout.

De code ziet er goed uit.

Fout die ik krijg is

JSX-elementtype 'Hello' heeft geen construct- of callsignaturen.

app.tsx

/// <reference path="typings/tsd.d.ts" />
import React = require('react');
import ReactDOM = require('react-dom');
import $ = require('jquery');
import Hello = require('./components/Hello');

$(()=>{
    ReactDOM.render(<Hello name="Tom" />,document.body);
});

componenten/Hello.tsx

/// <reference path="../typings/tsd.d.ts" />
import React = require('react');

export default class Hello extends React.Component<any,any>{
    render(){
        return <div className="hello">Hello {this.props.name} !</div>;
    }
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "jsx": "react"
    }
}

Antwoord #1

Als je deze regels schreef

export default class Hello ...
/* and */    
import Hello = require('./components/Hello');

Dan moet je dit schrijven om het te gebruiken:

<Hello.Hello name="Tom" />

Je zou dit in plaats daarvan kunnen schrijven, om de module de klasse als topniveau-object te laten exporteren:

class Hello ...
export = Hello

of je zou de Hello-export uit de module kunnen importeren met destructuring:

import { Hello } from './components/Hello';

of je zou de standaard export uit de module kunnen importeren:

import Hello from './components/Hello';