javascript - Typescript/React 功能组件的 props 功能 - 什么类型?
问题描述
我是 React 的新手,想知道如何更改此代码,以便我不会将任何代码用于添加到组件中的添加函数。
我读到的大部分内容都说要使用 React 鼠标单击事件类型,但它只有 1 个参数,而且无论如何都不是真正发生的事情,所以两种不同的方式看起来都很糟糕。
import React, { useState } from 'react';
interface IProps {
count?: number;
incrementBy?: number;
onClick: any;
// EDIT - FIX - correct fn type
// I also took optional ? off types in app
//onClick: (count: number, incrementBy: number) => void;
}
const Description2: React.FC<IProps> = (props: IProps) => (
<div>
<p>My favorite number is {props.count}, incrementBying by {props.incrementBy}</p>
<button
onClick={() => props.onClick(props.count, props.incrementBy)}
>
Increase
</button>
</div>
);
const App: React.FC = () => {
//initialize state
const increase = 4;
const [count, setCount] = useState(increase);
const [user, setUser] = useState("world");
const add = (currentCount: number, bump: number) => {
setCount(currentCount + bump);
};
return (
<div >
<Description2
count={count}
incrementBy={increase}
onClick={add} />
</div>
);
}
export default App;
解决方案
正确的类型是:
(count: number, incrementBy: number) => any
推荐阅读
- react-native - 反应原生是否支持重复线性渐变?
- java - 错误:SQLException: Parameter index out of range (1 > number of parameters, which is 0)
- html - 我想制作一个可以在列表中创建列表的 django 应用程序
- mysql - 改进了在 SELECT WHERE IN 语句中找出“未使用”值的方法
- aws-codepipeline - AWS CodeBuild 因 .net 控制台应用程序的 CommandNotFoundException 而失败
- javascript - Tampermonkey 脚本点击事件在用户与窗口交互之前什么都不做
- python - 如何使用 geopanda 或 shapely 在同一地理数据框中找到最近的点
- python-3.x - 如何指定要在 sonarqube 中扫描的语言版本?
- amazon-redshift - Redshift 是否支持 SELECT 中的用户定义变量?
- html - 在 VBA 中使用 XMLHTTP 对象解析一些网站