Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 在React+中重用函数的类型;打字稿_Reactjs_Typescript - Fatal编程技术网

Reactjs 在React+中重用函数的类型;打字稿

Reactjs 在React+中重用函数的类型;打字稿,reactjs,typescript,Reactjs,Typescript,我在父组件中定义了一个函数,它作为一个道具传递给子组件。现在我为声明它的函数做类型定义,然后我必须为子组件上的props做完全相同的类型定义 这感觉很乱。我知道我可以为函数编写类型def并将其存储在其他文件中,然后将该类型导入父级和子级。如果我这样做了,那么我要么得到一个包含所有这些类型定义的大文件,要么得到一堆包含更少类型定义的小文件,并且思考这两个选项时感觉有点不知所措 这里最好的方法是什么 母公司 const foo = (str: string): void => { co

我在父组件中定义了一个函数,它作为一个道具传递给子组件。现在我为声明它的函数做类型定义,然后我必须为子组件上的props做完全相同的类型定义

这感觉很乱。我知道我可以为函数编写类型def并将其存储在其他文件中,然后将该类型导入父级和子级。如果我这样做了,那么我要么得到一个包含所有这些类型定义的大文件,要么得到一堆包含更少类型定义的小文件,并且思考这两个选项时感觉有点不知所措

这里最好的方法是什么

母公司

const foo = (str: string): void => {
    console.log(str);
}
// ...
return <Child foo={foo} />

您可以导出
ChildProps
,然后在父级中使用以获取
foo
prop的类型:

const foo: ChildProps['foo'] = str => {
    console.log(str);
}


或者,即使不导出子道具类型,也可以使用
ComponentProps
实用程序获取它:

import { ComponentProps } from 'react';

const foo: ComponentProps<typeof Child>['foo'] = str => {
    console.log(str);
}
从'react'导入{ComponentProps};
常量foo:ComponentProps['foo']=str=>{
console.log(str);
}

import { ComponentProps } from 'react';

const foo: ComponentProps<typeof Child>['foo'] = str => {
    console.log(str);
}