我正在尝试使用 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>)
    }
}

方法二抛出错误



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

最佳答案

您的代码有多个问题。

  • 因为 TypeScript 遵循 ESModule 规范,所以您必须使用 * as React from 'react' 导入 React。 ReactDOM 也是如此。
  • 如果我使用你的 Button 输入路径,TypeScript 在那里找不到任何东西。
  • 如果我使用了正确的路径,TypeScript 会告诉你 onclick 上没有 Button 属性。只有一个 onClick
  • 将点击处理程序传递给 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 :)

    关于javascript - react typescript Hello World ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43202694/

    10-12 12:27
    查看更多