React-Typescript Hello World

Question

我正在尝试使用Typescript进行Hello World React。我写了下面的代码。当我使用方法1时，此代码有效，但在方法2上抛出错误

Method 1 - TypeScriptComponent.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log("Hello World")
}

export const TypeScriptComponent = (props: TypeScriptComponentProps) => <Button onclick={handleClick()} bsClass="glyphicon glyphicon-new-window"></Button>;

此代码有效（带有handleClick函数的一些意外行为，稍后我可以解决。）

但这种方法不起作用

Method 2 - TypeScriptComponent.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log("Hello World")
}

export default class TypeScriptComponent extends React.Component<TypeScriptComponentProps, {}> {
    render() {
        return (<Button onclick={handleClick()} bsClass="glyphicon glyphicon-new-window"></Button>)
    }
}

方法2抛出错误

  

[at-loader]中的错误./components/TypeScriptComponent.tsx:43:70       TS2339：财产＆＃39; _ 原型 _＆＃39;类型＆＃39;（）=＆gt;上不存在任何＆＃39;

     

[at-loader]中的错误./components/TypeScriptComponent.tsx:46:5       TS2346：提供的参数与呼叫目标的任何签名都不匹配。

我无法弄清楚这两种方法有什么区别？为什么会出现这些错误？

Answer 1

您的代码有多个问题。

1. 由于TypeScript遵守ESModule规范，因此您必须使用* as React from 'react'导入React。对于ReactDOM也是如此。
2. 如果我使用Button TypeScript的输入路径，则无法找到任何内容。
3. 如果我使用正确的路径，TypeScript会告诉您onclick上没有Button道具。只有onClick。
4. 您将点击处理程序传递给onClick的方式没有任何意义。您必须传递函数而不是函数的返回值。

这对我有用：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log('Hello World');
}

class App extends React.Component<TypeScriptComponentProps, {}> {
    render() {
        return (<Button onClick={handleClick} bsClass="glyphicon glyphicon-new-window">Click Me!</Button>)
    }
}


ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);

我的配置使用ts-loader而不是at-loader。您是否将CheckPlugin添加到您的webpack配置中？另外，你不会得到任何类型的错误。

如果您是新手或不熟悉Webpack / TypeScript / React-combo，我建议您查看create-react-app：https://github.com/wmonk/create-react-app-typescript的这一分支：）