Javascript 键入脚本/反应功能组件';s道具功能-什么类型?
我是新手,不知道如何更改此代码,这样我就不会对添加到组件中的add函数使用任何代码 我读到的大部分内容都说使用React-mouse-click事件类型,但它只有1个参数,而且实际上并不是这样,所以有两种不同的方式看起来很糟糕Javascript 键入脚本/反应功能组件';s道具功能-什么类型?,javascript,reactjs,typescript,functional-programming,components,Javascript,Reactjs,Typescript,Functional Programming,Components,我是新手,不知道如何更改此代码,这样我就不会对添加到组件中的add函数使用任何代码 我读到的大部分内容都说使用React-mouse-click事件类型,但它只有1个参数,而且实际上并不是这样,所以有两种不同的方式看起来很糟糕 import React, { useState } from 'react'; interface IProps { count?: number; incrementBy?: number; onClick: any; // EDIT - FIX -
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;
import React,{useState}来自“React”;
接口IProps{
计数?:数字;
递增?:数字;
onClick:任何;
//编辑-修复-更正fn类型
//我还在应用程序中选择了可选的?off类型
//onClick:(count:number,incrementBy:number)=>void;
}
常量描述2:React.FC=(props:IProps)=>(
我最喜欢的数字是{props.count},递增为{props.incrementBy}
props.onClick(props.count,props.incrementBy)}
>
增加
);
常量应用程序:React.FC=()=>{
//初始化状态
常数增加=4;
const[count,setCount]=使用状态(增加);
const[user,setUser]=useState(“世界”);
常量添加=(当前计数:编号,通气:编号)=>{
设置计数(当前计数+通气);
};
返回(
);
}
导出默认应用程序;
正确的类型应为:
(count: number, incrementBy: number) => any
我认为最后一个参数应该是void而不是any-只是为了去掉any。是吗?是的,你也可以用。我只使用
any
,因为返回值被忽略,所以函数是否返回某个值无关紧要。