gpt4 book ai didi

javascript - React-Typescript Hello World

转载 作者:搜寻专家 更新时间:2023-10-30 21:51:29 25 4
gpt4 key购买 nike

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

方法 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 函数有一些意外行为,我可以稍后解决。)

但是这个方法行不通

方法 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>)
}
}

方法二报错

ERROR in [at-loader] ./components/TypeScriptComponent.tsx:43:70 TS2339: Property '_ proto _' does not exist on type '() => any'.

ERROR in [at-loader] ./components/TypeScriptComponent.tsx:46:5 TS2346: Supplied parameters do not match any signature of call target.

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

最佳答案

您的代码有多个问题。

  1. 因为 TypeScript 遵循 ESModule 规范,所以您必须使用 * as React from 'react' 导入 React。 ReactDOM 也一样。
  2. 如果我正在为 Button 使用您的输入路径,TypeScript 无法在那里找到任何内容。
  3. 如果我使用了正确的路径,TypeScript 会告诉您Button 上没有onclick 属性。只有一个 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 :)

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com