- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试使用 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.
我无法弄清楚这两种方法之间有什么区别?为什么会出现这些错误??
最佳答案
您的代码有多个问题。
* as React from 'react'
导入 React。 ReactDOM 也一样。Button
使用您的输入路径,TypeScript 无法在那里找到任何内容。Button
上没有onclick
属性。只有一个 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/
我的 CS2 讲师给出了一个 java 正则表达式,用于检查单词是否重复: \\b(\\w+)\\s+\\1\\b 如何修改它来检查某个单词是否重复两次,如“hello hello hello”或“h
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
这个问题已经有答案了: printf anomaly after "fork()" (3 个回答) 已关闭 3 年前。 #include #include Void main() { Printf
我一直在分配以下作业来解释 3 个语句中发生的事情,但我无法弄清楚。 cout << ("hello" + 1); // ello cout << (*"hello") + 1; // 10
如何确定用户是否使用 hello.js 登录? 使用 Google Sign-In SDK,我可以使用 gapi.auth2.init() 注册回调,当设置 SDK 并准备好回答诸如“你是登录了吗?”
执行String S1 = "hello";后,JVM将在SCP中创建一个String对象,该对象将在value字段中保存一个字符数组,如 s1.value = {'h', 'e', 'l', 'l'
我正在 build gomobile Hello示例应用程序,但遇到以下问题:在 Xcode (7.1) 中打开应用程序后尝试构建并运行该应用程序时,出现错误“找不到 hello/Hello.h”文件
#coding=utf-8 '''Tkinter module''' from Tkinter import * import time root=Tk() t=Text(root,fg='red')
在C/C++中,下面两行代码有什么区别: char *str1="hello"; char *str2={"hello"}; 最佳答案 根据 2011 C 标准,条款 6.7.9 初始化,第 11
我对在 android studio 中导入 import.hello.Hello 时出错有疑问,如下图所示。请给我解决方案如何解决这个错误 最佳答案 请参阅此处 @Arpit Patel answe
hello/ 忽略文件夹结构中任何位置名为“hello”的所有文件夹 hello/* 仅忽略顶级文件夹“hello”。 这是为什么?请指出http://git-scm.com/docs/gitigno
请解释以下程序中发生了什么。 我在程序的开头和结尾检查了 strerror(errno) 返回的地址,并确认它每次都返回相同的地址。然后一旦确定这一点,在第一种情况下我继续将相同的地址分配给 ptr,
在整个互联网上你都会看到这个命令 alias hello='echo Hello' 是的,我知道以上是一个蹩脚的例子,但它不是重点。如果我执行它,它就会起作用。但是当我重新启动计算机时,它丢失了。为什
我正在学习 C++ 指针,而 -> 运算符对我来说似乎很奇怪。代替ptr->hello(); 可以写成 (*ptr).hello(); 因为它似乎也可以工作,所以我认为前者只是更方便方式。 是这样还是
这个问题在这里已经有了答案: About the changing id of an immutable string (5 个回答) 关闭4年前。 为什么 "hello"is "hello" 在 P
我需要Prolog的源代码,它用于与Weka连接,并且能够在Windows环境下使用Weka算法进行预测。我尝试通过 Java 连接,但无法使用 Java 和 Prolog 进行连接和预测。 最佳答案
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Capitalize First Char of Each Word in a String Java 编写进行以下
当我在 ruby 控制台中运行以下示例时,我感到很惊讶。它们都产生相同的输出。 "hello".length 和 "hello" .length ruby
我创建了一个Hello World应用,系统生成了下面大部分的Android语言。在没有 System.out 语句的情况下运行应用程序时,模拟器中不会显示“Hello”。然后,使用 Eclipse
是的,所以我正在制作一个沼泽标准 Hello world 以确保 android 正常工作。这是我第一次使用 android,所以我正在设置环境。我按照以下程序制作了程序:http://develop
我是一名优秀的程序员,十分优秀!