Reactjs 描述如何使用typescript反应组件包装器

如何描述tippy接受typescript将正确使用的任何子级的包装器

import Tippy, { TippyProps } from '@tippy.js/react'
import React from 'react'
import 'tippy.js/dist/tippy.css'

Tippy.defaultProps = {
  maxWidth: '500px',
}

export const Tooltip: Tooltip = ({ children, content, ...rest }) => {
  if (!children) return null
  if (!content) return children

  return (
    <Tippy content={content} {...rest}>
      {children}
    </Tippy>
  )
}

interface Tooltip {
  (props: MyProps): React.ForwardRefExoticComponent<TippyProps> | null | React.ReactNode
}

interface MyProps {
  content?: string | React.ReactNode
  children?: React.ReactNode
}

import Tippy，{TippyProps}来自'@Tippy.js/react'
从“React”导入React
导入'tippy.js/dist/tippy.css'
Tippy.defaultProps={
maxWidth:'500px'，
}
导出常量工具提示：工具提示=（{children，content，…rest}）=>{
如果（！children）返回null
如果（！content）返回子级
返回(
{儿童}
)
}
界面工具提示{
（props:MyProps）：React.ForwardRefExoticComponent | null | React.ReactNode
}
接口MyProps{
内容？：字符串| React.ReactNode
子节点？：React.ReactNode
}

这样使用：

   <Tooltip content='Text'>
        <div>123</div>
   </Tooltip>

123

Typescript为返回语句中的子项提供了错误：

键入'string | number | true |{}| ReactElement 组件）>|空）|（新（道具：任意）=> 组件）>| ReactNodeArray | ReactPortal’不是 可分配给类型“ReactElement” ReactElement组件）>| null）|（新的（道具：任意）=>组件）>'。类型“string”不可分配给类型“ReactElement ReactElement Component）>| null）|（新（props:any） =>Component）>'.ts（2322）index.d.ts（6，3）：预期的类型来自属性'children'，该属性在这里的类型上声明 “内在的颂词和酒杯”

---

错误正好指出了问题所在：您已声明子节点为ReactNode，但ReactNode可以是字符串，Tippy（显然）不接受字符串子节点。改用ReactElement。在调试像这样的typescript错误时，添加空白格式通常很有帮助（至少在您更习惯于阅读它们之前是这样）：

Type 
'string | number | true | {} | ReactElement ReactElement Component)> | null) 
| (new (props: any) => Component)> 
| ReactNodeArray 
| ReactPortal' 
is not assignable to type 
'ReactElement ReactElement Component)> | null) 
| (new (props: any) => Component)>'

Type 'string' is not assignable to type 
'ReactElement ReactElement Component)> | null) 
| (new (props: any) => Component)>'

ts(2322) index.d.ts(6, 3): The expected type comes from property 'children' 
which is declared here on type 'IntrinsicAttributes & TippyProps'

---

错误正好指出了问题所在：您已声明子节点为ReactNode，但ReactNode可以是字符串，Tippy（显然）不接受字符串子节点。改用ReactElement。在调试像这样的类型脚本错误时，添加空白格式通常很有帮助（至少在您习惯阅读它们之前是这样）。@JaredSmith thx，您应该回答，而不是评论，这样我就可以接受您的回答：）@JaredSmith thx，我真的很难阅读这些错误。我不知道空白格式。是的，它们很密集。在我刚刚发布的答案中，我给出了一个例子，我所做的只是添加了一些策略性放置的回车符。嗯，你确定vscode控制台有空白格式吗？不，我只是在一个临时缓冲区中手动完成的。在你做了前几步之后，你的眼睛很可能会开始自动挑选相关的部分。另一件可能有帮助的事情是查看实际的React d.ts文件，它非常大，您必须四处搜索，但至少大致了解不同的React类型是什么并不坏。