我在整个Typescript应用程序中使用React Functional组件。
我正在尝试动态更新另一个组件中的一些子组件,如下所示:
const memoizedIterateAndAddProps = useCallback(
(kids: ReactNode) => {
return React.Children.map(kids, (child) => {
if (React.isValidElement(child)){
console.log(child.type.name)
}
}
}, [])
但是 typescript 一直抱怨Property 'name' does not exist on type 'string | JSXElementConstructor<any>'. Property 'name' does not exist on type 'string'.ts(2339)
我知道这与一个孩子可能只是一个字符串的事实有关,但我找不到一种方法来解决这个问题,使Typescript高兴。
我会非常感激任何人的帮助
3条答案
按热度按时间ccrfmcuu1#
......但我想不出一个能让Typescript满意的解决方法。
检查它是否为字符串:
(Or
&& "name" in child.type
也可以。)在执行
<div/>
等操作时,会得到type
的字符串,因此如果要使用name
,必须过滤掉这种情况。thtygnil2#
React.isValidElement
具有以下类型签名:在typeguard之上,将
child
缩小为ReactElement
,其具有以下类型签名:您可能已经注意到,
type
是string
和JSXElementConstructor<any>
的并集。因此,如果你想确保你有一个处理函数,你应该使用自定义typeguard:
完整代码:
Playground
nhjlsmyf3#
检查:
child
是ReactElement
,且React元素具有type
性质。type
是function
,并且函数具有name
属性。