我正在尝试使用 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>)
}
}
方法二抛出错误
我无法弄清楚这两种方法之间有什么区别?为什么会出现这些错误??
最佳答案
您的代码有多个问题。
* as React from 'react'
导入 React。 ReactDOM 也是如此。 Button
输入路径,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/